微信小程序开发相关资料

阳光穿透心脏的1/2处 2021-09-18 09:38 281阅读 0赞

简易微信小程序教程一：[https://blog.csdn.net/proteen/article/details/80875670][https_blog.csdn.net_proteen_article_details_80875670]

### **目录** ###

【一】开发前期准备

【二】代码构成

JSON 配置

WXML 模板

WXSS 样式

JS 交互逻辑

【三】小程序能力

小程序的启动

程序与页面

组件

API

【四】发布前的准备

【五】上线

提交审核

发布

运营数据

--------------------

## 【一】开发前期准备 ##

1.申请帐号（申请成功后即可拥有小程序开发帐号）

[https://mp.weixin.qq.com/wxopen/waregister?action=step1][https_mp.weixin.qq.com_wxopen_waregister_action_step1]

2.登录 [https://mp.weixin.qq.com][https_mp.weixin.qq.com] ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 **AppID** 了 。

3.安装开发工具

前往 [开发者工具下载页面][Link 1] ，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看 [《开发者工具介绍》][Link 2] 。

## 【二】代码构成 ##

四类文件：

1.  `.json` 后缀的 `JSON` 配置文件
2.  `.wxml` 后缀的 `WXML` 模板文件
3.  `.wxss` 后缀的 `WXSS` 样式文件
4.  `.js` 后缀的 `JS` 脚本逻辑文件

### JSON 配置 ###

小程序配置 app.json（当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等）

`（1）app.json` 配置内容如下：

{
      "pages": ["pages/index/index", "pages/logs/logs"],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      }
    }

我们简单说一下这个配置各个项的含义:

1.  `pages`字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2.  `window`字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档 [小程序的配置 app.json][app.json] 。

（2）工具配置 project.config.json

你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

其他配置项细节可以参考文档 [开发者工具的配置][Link 3] 。

（3）页面配置 page.json（提供了 `page.json`，让开发者可以独立定义每个页面的一些属性）

其他配置项细节可以参考文档 [页面配置][Link 4] 。

### WXML 模板 ###

`WXML` 充当的就是类似 `HTML` 的角色，和 `HTML` 非常相似，`WXML` 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：

1.  标签名字有点不一样
    
    往往写 HTML 的时候，经常会用到的标签是 `div`, `p`, `span`，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。把这些常用的组件包装起来，大大提高我们的开发效率。小程序的 `WXML` 用的标签是 `view`, `button`, `text` 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
    
    更多详细的组件讲述参考下个章节 [小程序的能力][Link 5]
2.  多了一些 `wx:if` 这样的属性以及 `{ { }}` 这样的表达式
    
    在网页的一般开发流程中，我们通常会通过 `JS` 操作 `DOM` (对应 `HTML` 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，`JS` 会记录一些状态到 `JS` 变量里边，同时通过 `DOM` API 操控 `DOM` 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 `JS` 直接操控 `DOM`，`JS` 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
    
    小程序的框架也是用到了这个思路，如果你需要把一个 `Hello World` 的字符串显示在界面上。
    
    WXML 是这么写 :
    
        <text>{
             {msg}}</text>
    
    JS 只需要管理状态即可:
    
        this.setData({msg: 'Hello World'})
    
    通过 `{ { }}` 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 `if`/`else`, `for`等控制能力，在小程序里边，这些控制能力都用 `wx:` 开头的属性来表达。
    
    更详细的文档可以参考 [WXML][]

### WXSS 样式 ###

`WXSS` 具有 `CSS` 大部分的特性，小程序在 `WXSS` 也做了一些扩充和修改。

1.  新增了尺寸单位。在写 `CSS` 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。`WXSS` 在底层支持新的尺寸单位 `rpx` ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2.  提供了全局的样式和局部样式。和前边 `app.json`, `page.json` 的概念相同，你可以写一个 `app.wxss` 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 `page.wxss` 仅对当前页面生效。
3.  此外 `WXSS` 仅支持部分 `CSS` 选择器

更详细的文档可以参考 [WXSS][] 。

### JS 交互逻辑 ###

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 `JS` 脚本文件来处理用户的操作。

点击 `button` 按钮的时候，我们希望把界面上 `msg` 显示成 `"Hello World"`，于是我们在 `button` 上声明一个属性: `bindtap` ，在 JS 文件里边声明了 `clickMe` 方法来响应这次点击操作：

Page({
      clickMe() {
        this.setData({msg: 'Hello World'})
      }
    })

响应用户的操作就是这么简单，更详细的事件可以参考文档 [WXML - 事件][WXML -] 。

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。更多 API 可以参考文档 [小程序的API][API] 。

## 【三】小程序能力 ##

### 小程序的启动 ###

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 `app.json` 的 `pages` 字段就可以知道你当前小程序的所有页面路径:

{
      "pages": ["pages/index/index", "pages/logs/logs"]
    }

这个配置说明在 QuickStart 项目定义了两个页面，分别位于 `pages/index/index` 和 `pages/logs/logs`。而写在 `pages` 字段的第一个页面就是这个小程序的首页（打开小程序看到的第一个页面）。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 `app.js` 定义的 `App` 实例的 `onLaunch` 回调会被执行:

App({
      onLaunch() {
        // 小程序启动之后 触发
      }
    })

整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档 [注册程序 App][App] 。

### 程序与页面 ###

你可以观察到 `pages/logs/logs` 下其实是包括了4种文件的，微信客户端会先根据 `logs.json` 配置生成一个界面，顶部的颜色和文字你都可以在这个 `json` 文件里边定义好。紧接着客户端就会装载这个页面的 `WXML` 结构和 `WXSS` 样式。最后客户端会装载 `logs.js`，你可以看到 `logs.js` 的大体内容就是:

Page({
      data: { // 参与页面渲染的数据
        logs: []
      },
      onLoad() {
        // 页面渲染后 执行
      }
    })

`Page` 是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会把 `data` 数据和 `index.wxml` 一起渲染出最终的结构，于是就得到了你看到的小程序的样子。

在渲染完界面之后，页面实例就会收到一个 `onLoad` 的回调，你可以在这个回调处理你的逻辑。

有关于 `Page` 构造器更多详细的文档参考 [注册页面 Page][Page] 。

### 组件 ###

就像 `HTML` 的 `div`, `p` 等标签一样，在小程序里边，你只需要在 `WXML` 写上对应的组件标签名字就可以把该组件显示在界面上。

更多的组件可以参考 [小程序的组件][Link 6]。

### API ###

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

要获取用户的地理位置时，只需要：

wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        const latitude = res.latitude // 纬度
        const longitude = res.longitude // 经度
      }
    })

调用微信扫一扫能力，只需要：

wx.scanCode({
      success: (res) => {
        console.log(res)
      }
    })

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。

更多的 API 能力见 [小程序的API][API]。

--------------------

## 【四】发布前的准备 ##

**如果你只是一个人开发小程序，可以暂时先跳过这部分，如果是一个团队需要先了解一些概念。**

[https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/role.html\#%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD][https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_role.html_E7_94_A8_E6_88_B7_E8_BA_AB_E4_BB_BD]

--------------------

## 【五】上线 ##

### 提交审核 ###

为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。

在开发者工具中上传了小程序代码之后，登录 [小程序管理后台][https_mp.weixin.qq.com] \- 开发管理 - 开发版本 找到提交上传的版本。

在开发版本的列表中，点击 **提交审核** 按照页面提示，填写相关的信息，即可以将小程序提交审核。

需要注意的是，**请开发者严格测试了版本之后，再提交审核**， 过多的审核不通过，可能会影响后续的时间。

### 发布 ###

审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时登录 [小程序管理后台][https_mp.weixin.qq.com] \- 开发管理 - 审核版本中可以看到通过审核的版本。

请点击发布，即可发布小程序。

### 运营数据 ###

有两种方式可以方便的看到小程序的[运营数据][Link 7]

方法一：

点击相应的 tab 可以看到相关的数据。

方法二：

使用小程序数据助手，在微信中方便的查看运营数据

![mydev][]

[https_blog.csdn.net_proteen_article_details_80875670]: https://blog.csdn.net/proteen/article/details/80875670
[https_mp.weixin.qq.com_wxopen_waregister_action_step1]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[https_mp.weixin.qq.com]: https://mp.weixin.qq.com
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19022220
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html?t=19022220
[app.json]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE
[Link 5]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html
[WXML]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html
[WXSS]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[WXML -]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[API]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html
[App]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
[Page]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/component/
[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_role.html_E7_94_A8_E6_88_B7_E8_BA_AB_E4_BB_BD]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/role.html#%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD
[Link 7]: https://developers.weixin.qq.com/miniprogram/analysis/index.html?t=19022220
[mydev]: https://developers.weixin.qq.com/miniprogram/dev/image/quickstart/mydata.jpeg?t=19022220