小程序对比微信公众号的优势
-
基本功能优势
a. 检测网络状态
b. 媒体类操作:录音、拍照、拍视频
c. 可以直接对手机内文件进行操作
-
数据类功能
a. 获取位置信息
b. 获取用户数据:头像、微信号、性别等
c. 当前使用的设备信息
-
微信功能
a. 微信支付
b. 生物识别(指纹等)
c. 微信运动
d. 微信卡券
e. 客服功能
f. 二维码功能
-
社交功能
a. 微信转发、QQ转发(需要客户确认)
开发前准备
- 在注册小程序账号(此处不再赘述)
- 安装
小程序分层
- App层(根目录下的app.js、app.json、app.wxss) 在/app.js中可以存储全局使用的数据,如用户信息等。 这样就不需要像Vue和React中通过Vuex和Redux管理全局状态。
- Page层(/page目录下的各页面) 在每个页面中分别存储该页面的数据。
小程序的文件构成
-
.json 后缀的 JSON 配置文件
a. 小程序全局配置app.json
包括了小程序的所有页面路径(pages)、界面表现(window)、网络超时时间(networkTimeout)、底部 tab(tabBar) 等。QuickStart 项目里边的 app.json 配置。
b. 工具配置 project.config.json
小程序开发工具的个性化配置,例如界面颜色、编译配置等等。
c. 页面配置 page.json
支持为每个页面单独配置如界面风格等。
-
.wxml 后缀的 WXML 模板文件
类似于Web中的HTML,但需要使用微信中自定义的组件。
其语法类似于Vue中的模板语法,例如
<view>{
{message}}</view><view wx:for="{
{array}}">{ {item}}</view><view wx:if="{
{view == 'WEBVIEW'}}">WEBVIEW</view>。 -
.wxss 后缀的 WXSS 样式文件
类似于Web中的CSS,它实现了CSS的大部分特性。
同时提供了新单位rpx,rpx是基于750的屏幕宽度进行换算,也即是在750宽的屏幕下1rpx = 1px,在其他屏幕下会自适应。
因此小程序的设计稿推荐使用iPhone6为标准。
-
.js 后缀的 JS 脚本逻辑文件
与Vue不同,小程序更新状态的方式类似于React的setState,需要写成this.setData({msg: 'Hello World'})。