微信小程序教程01：小程序简介

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chencl1986/article/details/86550470

小程序对比微信公众号的优势

1. 基本功能优势

   a. 检测网络状态

   b. 媒体类操作：录音、拍照、拍视频

   c. 可以直接对手机内文件进行操作

2. 数据类功能

   a. 获取位置信息

   b. 获取用户数据：头像、微信号、性别等

   c. 当前使用的设备信息

3. 微信功能

   a. 微信支付

   b. 生物识别（指纹等）

   c. 微信运动

   d. 微信卡券

   e. 客服功能

   f. 二维码功能

4. 社交功能

   a. 微信转发、QQ转发（需要客户确认）

开发前准备

1. 在微信公众平台注册小程序账号（此处不再赘述）
2. 安装微信开发者工具

小程序分层

1. App层（根目录下的app.js、app.json、app.wxss）
   在/app.js中可以存储全局使用的数据，如用户信息等。
   这样就不需要像Vue和React中通过Vuex和Redux管理全局状态。
2. Page层（/page目录下的各页面）
   在每个页面中分别存储该页面的数据。

小程序的文件构成

1. .json 后缀的 JSON 配置文件

   a. 小程序全局配置app.json

   包括了小程序的所有页面路径（pages）、界面表现（window）、网络超时时间（networkTimeout）、底部 tab（tabBar） 等。QuickStart 项目里边的 app.json 配置。

   b. 工具配置 project.config.json

   小程序开发工具的个性化配置，例如界面颜色、编译配置等等。

   c. 页面配置 page.json

   支持为每个页面单独配置如界面风格等。

2. .wxml 后缀的 WXML 模板文件

   类似于Web中的HTML，但需要使用微信中自定义的组件。

   其语法类似于Vue中的模板语法，例如

   <view>{{message}}</view>

   <view wx:for="{{array}}">{{item}}</view>

   <view wx:if="{{view == ‘WEBVIEW’}}">WEBVIEW</view>。

3. .wxss 后缀的 WXSS 样式文件

   类似于Web中的CSS，它实现了CSS的大部分特性。

   同时提供了新单位rpx，rpx是基于750的屏幕宽度进行换算，也即是在750宽的屏幕下1rpx = 1px，在其他屏幕下会自适应。

   因此小程序的设计稿推荐使用iPhone6为标准。

4. .js 后缀的 JS 脚本逻辑文件

   与Vue不同，小程序更新状态的方式类似于React的setState，需要写成this.setData({msg: ‘Hello World’})。