微信小程序研究与学习汇总

微信小程序开发学习笔记

1. 登录认证

参考文章
小程序登录的一个重要角色就是微信的服务器。小程序的登陆流程时序图如下：

根据微信官方提供的登录流程时序图可以清楚的了解小程序登录需要以下的步骤：

• 小程序启动，通过wx.login()获取临时登录凭证code，code必须是微信给的，而且是唯一的
• 开发者服务器需要提供一个登录的接口，参数就是小程序获取的code
• 登录接口收到code后，调用微信提供的auth.code2Session接口进行code的验证
• 得到验证结果，成功后能得到一个用户唯一标识 OpenID 和 会话密钥 session_key
• 生成一个自定义的key, 将session_key和openid跟自定义的key关联起来
• 将自定义的key返回给小程序每次请求都带上key, 后端根据key获取openid识别当前用户身份

2. 数据交互

微信小程序页面通过微信提供的 wx.request() 发起HTTPS请求，具体可以见文档。
示例代码：

wx.request({
   
  url: 'test.php', //这里填写接口地址
  data: {
      //请求的参数，非必填项
    x: '',
    y: ''
  },
  header: {
   
    'content-type': 'application/json' // 可以在此修改header默认值
  },
  success (res) {
   
    console.log(res.data)       //res.data是开发者服务器返回的数据
  }})

有几点需要注意的地方：

• 发送异步请求不再是WEB的Ajax，而是用微信封装好的方法 wx.request。
• 小程序不存在跨域的问题，不用处理跨域。（跨域是web浏览器才有的概念，因为web资源都是存在服务端，客户端去请求服务端域名下的地址可以获取到本地在浏览器中执行，代码运行过程中对另一个领域进行请求，才产生了跨域。小程序类似客户端，小程序的代码都放在了客户端本地，也就是手机上，所以不存在跨域的现象，可以随意请求）
• 请求的地址必须在管理后台添加白名单
• 域名必须备案，服务端必须采用HTTPS

3. 具体的界面开发

3.0.开发工具：微信开发者工具

下载并安装微信开发者工具，用微信扫码可以登录。在开发者工具中新建一个helloworld项目（APPID可以使用测试ID）。

3.1. 微信小程序应用配置

3.1.1 微信小程序的目录结构介绍

新建的微信小程序项目的目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       ├── logs.json
│       ├── logs.wxss
│       └── logs.js
└── utils
│       └── utils.js

3.1.2 微信小程序配置

微信小程序配置可以在全局的app.json中进行，也可以在每个页面目录下的json文件中进行。 具体配置见开发文档
1. app.json 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。如下

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "blue",
    "navigationBarTitleText": "helloworld",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

可以在这里修改一些全局的样式和内容，其中必须要有pages属性。
pages中的第一行目录会做为小程序打开后的第一个页面来呈现。"pages/index/index",的最后没有文件后缀名，在同一目录下有index.js index.wxml index.wxss三个文件。
index.wxml是基于XML的，与HTML的不同就是必须遵守严格的规范，标签必须成对出现，类似<image>的标签也必须为<image></image>或者<image/>。
index.wxss是样式表文件，完全基于css语法，用来定义页面样式。有一个比CSS语法更高级的单位rpx
另外还可以有index.json文件，用以覆盖app.json文件中window对象中的样式。

小程序的根目录中的app.wxss中存放全局的样式。

2. page.json 页面配置
页面配置会覆盖掉app.json中window属性下相同属性的配置。

3. 标签栏配置
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

3.2. 微信小程序逻辑层与界面层分离架构

3.2.1 小程序的JS和浏览器中的JS的差别

1. 微信小程序不是运行在浏览器中的，所以没有BOM和DOM对象。在app.js中打印window和document对象，结果都是undefined。
2. 小程序的js有一些额外的成员：
   App方法：用于定义应用程序实例对象。
   Page方法：用于定义页面对象。一个小程序是由一个应用程序实例对象（App）和多个page对象组成的。
   getApp方法：用来获取全局应用程序对象。
   getCurrentPages方法：用来获取当前页面的调用栈。（数组，最后一个就是当前页面）
   wx对象：用来提供核心API。API文档
3. 小程序的JS是支持CommonJS规范的，我们可以通过require的方式载入模块，可以通过export的方式导出模块成员。例如：可以在utils文件夹下建立一个foo.js文件，内容为：

function sayItAgain(){
  console.log("say, say it again");
}

//导出sayItAgain方法
module.exports = {
  say: sayItAgain
}

//commonJS中可以使用以下方法，但是在微信小程序中不支持exports.xxx这种方法
exports.say = {
}

在外侧的app.js中可以进行调用：

const foo = require('./utils/foo.js') //引入模块
foo.say() //调用方法

3.2.2 界面层的数据绑定

数据绑定的文档

1. 数据在哪？
   小程序中规定，页面中的数据全部放在后台代码的data属性当中。data就是界面和逻辑之间的桥梁。

2. 绑定到哪里去？
   想绑定到哪就在哪里使用mustache语法输出，也就是用{ { }}的方式输出

3.2.3 界面层的列表渲染

列表渲染的文档

使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。

1. 明确页面结构中的循环体（也就是循环的标签结构）。
2. 删除多余的循环内容，只保留一个。
3. 在剩下的这个循环体上面加上wx:for属性，属性值等于要遍历的数据源，数据源必须是一个数组。
4. 在这个循环体（标签结构）内部使用item代表当前被遍历的元素。如果全局属性中有item关键词，就会出现冲突的情况，可以加上wx:for-item='xxx'修改本地属性的名字，给当前遍历的数据起个别名。加上wx:for-index可以给遍历的索引定义名称。

3.2.4 界面层的事件处理

微信小程序中的事件绑定方法：使用bind+事件名
写一个button，为它绑定一个事件，点击在控制台输出特定内容。在微信小程序里绑定事件的属性要使用bindtap，相当于浏览器中的onclick

<view class="container