【微信小程序前端开发】入门Day01 —— 小程序页面组成、组件使用及协同开发发布指南

小程序的项目结构

pages 用来存放所有小程序的页面
utils 用来存放工具性质的模块（例如：格式化时间的自定义模块）
app.js 小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引

小程序页面由几部分组成

 

小程序页面由 4 个基本文件组成：

1. .js 文件：页面的脚本文件，存放页面的数据、事件处理函数等。
2. .json 文件：当前页面的配置文件，配置窗口的外观、表现等。
3. .wxml 文件：页面的模板结构文件。
4. .wxss 文件：当前页面的样式表文件。

 

小程序中常见的组件如何使用

 

1. 视图容器类组件
   • view：普通视图区域，类似于 HTML 中的 div，是一个块级元素，常用来实现页面的布局效果。
   • scroll-view：可滚动的视图区域，常用来实现滚动列表效果。
   • swiper 和 swiper-item：轮播图容器组件和轮播图 item 组件。
2. 基础内容组件
   • text：文本组件，类似于 HTML 中的 span 标签，是一个行内元素，通过 selectable 属性可实现长按选中文本内容的效果。
   • rich-text：富文本组件，支持把 HTML 字符串渲染为 WXML 结构。
3. 其他常用组件
   • button：按钮组件，功能比 HTML 中的 button 按钮丰富，通过 open-type 属性可以调用微信提供的各种功能。
   • image：图片组件，默认宽度约 300px、高度约 240px，其 mode 属性可指定图片的裁剪和缩放模式。

 

小程序如何进行协同开发和发布

 

协同开发

 

1. 了解权限管理需求：中大型公司里，同一小程序项目会有不同岗位、角色的员工参与，需对权限进行划分。
2. 了解项目成员的组织结构：包括项目管理者、产品组、设计组、开发组、测试组。
3. 小程序的开发流程：产品组提需求，设计组出方案，开发组开发，测试组测试，最后发布。
4. 小程序成员管理
   • 成员管理的两个方面：项目成员（参与开发、运营，可登录管理后台，管理员可添加、删除并设置角色）和体验成员（参与内测体验，可使用体验版小程序，管理员及项目成员均可添加、删除）。
   • 不同项目成员对应的权限：如运营者、开发者、数据分析者各有不同权限。
   • 添加项目成员和体验成员：管理员可在后台添加。

 

发布

 

1. 小程序的版本
   • 开发版本：使用开发者工具上传代码，可自测，可删除，不影响线上和审核中版本。
   • 体验版本：可选择开发版本作为体验版。
   • 审核中的版本：只能有一份代码处于审核中，有审核结果后可发布或重新提交审核。
   • 线上版本：线上用户使用的版本，新版本发布后会被覆盖更新。
2. 发布上线的步骤
   • 上传代码：点击开发者工具顶部的 “上传” 按钮，填写版本号和项目备注。
   • 提交审核：在开发版本列表中点击 “提交审核” 按钮，按提示填写信息后提交给腾讯官方审核。
   • 发布：审核通过后，在审核版本列表中点击 “发布” 按钮，将审核通过的版本发布为线上版本。
3. 运营数据查看
   • 在 “小程序后台” 查看：登录后台，点击侧边栏的 “统计”，再点击相应 tab 查看数据。
   • 使用 “小程序数据助手” 查看：打开微信，搜索 “小程序数据助手”，查看已发布小程序相关数据。