【微信小程序前端开发】入门Day01 —— 小程序页面组成、组件使用及协同开发发布指南
小程序的项目结构
pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
utils 用来存放工具性质的模块(例如:格式化时间的自定义模块)
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
小程序页面由几部分组成
小程序页面由 4 个基本文件组成:
- .js 文件:页面的脚本文件,存放页面的数据、事件处理函数等。
- .json 文件:当前页面的配置文件,配置窗口的外观、表现等。
- .wxml 文件:页面的模板结构文件。
- .wxss 文件:当前页面的样式表文件。
小程序中常见的组件如何使用
- 视图容器类组件
- view:普通视图区域,类似于 HTML 中的 div,是一个块级元素,常用来实现页面的布局效果。
- scroll-view:可滚动的视图区域,常用来实现滚动列表效果。
- swiper 和 swiper-item:轮播图容器组件和轮播图 item 组件。
- 基础内容组件
- text:文本组件,类似于 HTML 中的 span 标签,是一个行内元素,通过 selectable 属性可实现长按选中文本内容的效果。
- rich-text:富文本组件,支持把 HTML 字符串渲染为 WXML 结构。
- 其他常用组件
- button:按钮组件,功能比 HTML 中的 button 按钮丰富,通过 open-type 属性可以调用微信提供的各种功能。
- image:图片组件,默认宽度约 300px、高度约 240px,其 mode 属性可指定图片的裁剪和缩放模式。
小程序如何进行协同开发和发布
协同开发
- 了解权限管理需求:中大型公司里,同一小程序项目会有不同岗位、角色的员工参与,需对权限进行划分。
- 了解项目成员的组织结构:包括项目管理者、产品组、设计组、开发组、测试组。
- 小程序的开发流程:产品组提需求,设计组出方案,开发组开发,测试组测试,最后发布。
- 小程序成员管理
- 成员管理的两个方面:项目成员(参与开发、运营,可登录管理后台,管理员可添加、删除并设置角色)和体验成员(参与内测体验,可使用体验版小程序,管理员及项目成员均可添加、删除)。
- 不同项目成员对应的权限:如运营者、开发者、数据分析者各有不同权限。
- 添加项目成员和体验成员:管理员可在后台添加。
发布
- 小程序的版本
- 开发版本:使用开发者工具上传代码,可自测,可删除,不影响线上和审核中版本。
- 体验版本:可选择开发版本作为体验版。
- 审核中的版本:只能有一份代码处于审核中,有审核结果后可发布或重新提交审核。
- 线上版本:线上用户使用的版本,新版本发布后会被覆盖更新。
- 发布上线的步骤
- 上传代码:点击开发者工具顶部的 “上传” 按钮,填写版本号和项目备注。
- 提交审核:在开发版本列表中点击 “提交审核” 按钮,按提示填写信息后提交给腾讯官方审核。
- 发布:审核通过后,在审核版本列表中点击 “发布” 按钮,将审核通过的版本发布为线上版本。
- 运营数据查看
- 在 “小程序后台” 查看:登录后台,点击侧边栏的 “统计”,再点击相应 tab 查看数据。
- 使用 “小程序数据助手” 查看:打开微信,搜索 “小程序数据助手”,查看已发布小程序相关数据。