文章目录

微信小程序开发学习笔记
- 1. 登录认证
- 2. 数据交互
- 3. 具体的界面开发
- - 3.0.开发工具：微信开发者工具
  - 3.1. 微信小程序应用配置
  - - 3.1.1 微信小程序的目录结构介绍
    - 3.1.2 微信小程序配置
  - 3.2. 微信小程序逻辑层与界面层分离架构
  - - 3.2.1 小程序的JS和浏览器中的JS的差别
    - 3.2.2 界面层的数据绑定
    - 3.2.3 界面层的列表渲染
    - 3.2.4 界面层的事件处理
    - 3.2.5 界面层的事件冒泡和处理
    - 3.2.6 界面层的事件传参
    - 3.2.7 单向数据流
    - 3.2.8 界面层的条件渲染
    - 3.2.9 WXSS和CSS之间的差异
  - 3.3. 微信小程序组件介绍和应用
- 4. 微信小程序页面间跳转和传值
- - 4.1 微信小程序页面间跳转
  - 4.1 微信小程序页面间传值
  - 4.2 导航元素点击高亮
  - 4.3 通过API调用完成页面导航

微信小程序开发学习笔记

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的差别

微信小程序不是运行在浏览器中的，所以没有BOM和DOM对象。在app.js中打印window和document对象，结果都是undefined。
小程序的js有一些额外的成员：
App方法：用于定义应用程序实例对象。
Page方法：用于定义页面对象。一个小程序是由一个应用程序实例对象（App）和多个page对象组成的。
getApp方法：用来获取全局应用程序对象。
getCurrentPages方法：用来获取当前页面的调用栈。（数组，最后一个就是当前页面）
wx对象：用来提供核心API。API文档
小程序的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 界面层的数据绑定

数据绑定的文档

数据在哪？
小程序中规定，页面中的数据全部放在后台代码的data属性当中。data就是界面和逻辑之间的桥梁。
绑定到哪里去？
想绑定到哪就在哪里使用mustache语法输出，也就是用{{ }}的方式输出

3.2.3 界面层的列表渲染

列表渲染的文档

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

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

3.2.4 界面层的事件处理

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

<view class="container"><button bindtap="buttonTapHandler">tap</button>
</view>

Page({buttonTapHandler: function(e){console.log("-------clicked------")//dir是在控制台输出树形结构，便于查看console.dir(e)}
})

3.2.5 界面层的事件冒泡和处理

关于事件冒泡和事件冒泡在普通浏览器中的处理
JS中的事件冒泡和事件捕获

微信小程序中处理事件冒泡的方法：把bindtap改为catchtap。catch+事件名是阻止冒泡并且绑定事件。例子：

<view class="container"><view class="box1" bindtap="buttonTapHandler"><view class="box2" bindtap="buttonTapHandler"></view></view><view class="box1" catchtap="buttonTapHandler"><view class="box2" catchtap="buttonTapHandler"></view></view>
</view>

.box1 {width: 100px;height: 100px;background-color: red;
}
.box2 {width: 50px;height: 50px;background-color: blue;
}

Page({buttonTapHandler: function(e){console.log("-------clicked------")console.dir(e)}
})

结果如图：

3.2.6 界面层的事件传参

普通情况下的事件传参，可以在事件处理函数中定义变量，将参数传入。在微信小程序开发中，这种方法无法使用。

<button bindtap="tapHandler(123)">点击</button>

tapHandler: function(num) {console.log(num)}

这样写会有如下报错：

Component "pages/index/index" does not have a method "tapHandler(123)" to handle event "tap".

说明此时把tapHandler(123)整体当成函数名，所以不能通过这种方式传参。

解决方法：使用data-+参数的形式来传递，在事件处理函数中用e.target.dataset取参数。

<button bindtap="tapHandler" data-msg="hello">点击</button>

tapHandler: function(e) {console.dir(e)console.log(e.target.dataset.msg)
}

输出结果：

注意：事件处理函数中的this指向的是页面对象，和HTML中不同

3.2.7 单向数据流

从后台获取数据并且显示到界面上：

<input type="text" value="{{ msg }}"/>
<text> {{ msg }} </text>

Page({data: {msg: 'hello'}
})

这样就可以将后台的数据显示到界面上。但是这个过程只是单向的数据流，后台中的数据并不能随着输入内容的变化而变化，不能做到双向绑定。小程序中要做到数据双向绑定，需要借助事件对它进行进一步的操作：

<input type="text" value="{{ msg }}" bindinput="inputvalue"/>
<text> {{ msg }} </text>

Page({data: {msg: 'hello'},inputvalue: function(e){this.data.msg = e.detail.value}
})

以上程序在输入框中输入的时候，text中的数据并没有更改，也就是说并不能实现双向绑定。原因是因为小程序的单向数据渲染是一次行为，也就是一锤子买卖。在第一次建立绑定之后过程就停止了，不会监视数据的变化。如果想要同步的话，必须调用它内部的setData()方法。

<input type="text" value="{{ msg }}" bindinput="inputvalue"/>
<text> {{ msg }} </text>

Page({data: {msg: 'hello'},inputvalue: function(e){this.setData({msg: e.detail.value})}
})

这样在输入框中输入的时候，text中的数据发生更改，实现了双向绑定。setData()与直接赋值的区别在于setData()方法可以通知界面做出变化，而直接赋值没有办法实现这一点。

3.2.8 界面层的条件渲染

条件渲染文档
实例：使用vx:if控制显示隐藏

<view><view class="box"><view class="title" bindtap="changeShow">点击切换状态</view><block wx:if="{{ show }}"><view class="content"><view>11111111</view><view>22222222</view><view>11111111</view></view></block></view></view>

Page({data: {show: true,},//事件处理函数changeShow: function(){this.setData({show: !this.data.show})},
})

3.2.9 WXSS和CSS之间的差异

WXSS文档
最重要的一点就是rpx的使用。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。也就是宽度正好占满屏幕宽的情况下为750rpx。
如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

3.3. 微信小程序组件介绍和应用

详细见组件的文档介绍

语法问题

组件的使用是类似于HTML的方式（有不同），组件使用的严格的XML标准（开闭标签问题）

组件的分类

功能性的组件
- 用来完成具体功能
布局类型的组件
- 用来完成页面结构（DIV）
API 类型（使用的角度）
- wx.showModal
- 通过调用一个方法来使用

4. 微信小程序页面间跳转和传值

4.1 微信小程序页面间跳转

微信小程序可以通过在app.json中设置pages属性，为属性添加目录信息，来快速为程序添加页面：

"pages": ["pages/demo1/demo1","pages/demo2/demo2","pages/demo3/demo3"
]

微信小程序的页面跳转可以使用navigator标签实现。

<navigator url="../demo2/demo2"><button>demo2</button>
</navigator>
<navigator url="../demo3/demo3"><button>demo3</button>
</navigator>

4.1 微信小程序页面间传值

传统的web开发过程中页面间传值方式：在url中用?传参。把参数用?xxx=xxx的形式进行传递。
在微信小程序当中，也可以进行类似的操作。
微信小程序也和MVVM的框架一样，有生命周期函数的概念。
微信小程序的声明周期函数中有onload监听页面加载的函数，有一个options参数，通过url传递的参数就被保存在这个参数之内。
页面间的参数传递可以通过以下步骤进行：

传参：url中加上问号参数。
接收：生命周期onLoad事件中通过option参数接收。

//demo1.wxml中传递参数message和name
<navigator url="../demo2/demo2?message=hello&name=范德彪"><button>demo2</button>
</navigator>

//demo2.js中取出参数
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({message: options.message}) this.setData({name: options.name}) },/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

//demo2.wxml中展示参数
<text>传递过来的参数是：{{ message }}</text>
<text>传递过来的姓名是：{{ name }}</text>

微信小程序页面跳转默认是可以返回上一页的。如果有一些只出现一次的页面（比如用户第一次登录的时候要同意用户协议，或者教用户如何使用的页面），我们就可以用以下的方式在navigator标签中加上redirect，这样就不会出现返回按钮。

<navigator url="../demo3/demo3" redirect><button>demo3</button>
</navigator>

4.2 导航元素点击高亮

一般来说WEB开发中的导航元素都有点击后高亮的样式。navigator标签也专门为此提供了hover-class的属性，为指定点击时的样式类（当hover-class="none"时，没有点击态效果）

小技巧：如果需要一个非导航元素点击后有高亮的样式，我们可以给它加一个cursor: pointer的样式，这样就能够使它在点击时能有高亮的效果。这样我们可以让任何一个元素都具有点击高亮的效果。但是这样也有缺点，就是高亮的效果我们无法进行控制，所以如果要控制点击效果的话还是要使用navigator标签。

4.3 通过API调用完成页面导航

微信小程序路由文档

可以通过调用wx.navigateTo，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。wx.redirectTo关闭当前页面，跳转到应用内的某个页面，区别是这个API没有返回按钮。

微信小程序研究与学习汇总相关推荐

微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...
***腾讯云直播（含微信小程序直播）研究资料汇总-原创
***腾讯云直播(含微信小程序直播)研究资料汇总-原创原文: ***腾讯云直播(含微信小程序直播)研究资料汇总-原创这段时间抽空研究了下直播技术,综合比较了下腾讯云直播的技术和文档方面最齐全,现把 ...
基于微信小程序的英语学习激励系统设计与实现-计算机毕业设计源码+LW文档
摘要网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括 ...
ssm+vue+java微信小程序的英语学习激励系统#毕业设计
随着互联网大潮的到来,决定开发一套智能化.信息化的微信小程序的英语学习激励系统,主要对首页,个人中心,用户管理,单词分类管理,单词本管理,学习清单管理,试卷管理,试题管理,系统管理,考试管理等功能模块 ...
【最新计算机毕业设计】JAVA基于微信小程序的英语学习激励系统
基于微信小程序的英语学习激励系统毕设帮助.源码交流及指导,见文末对于微信小程序的英语学习激励系统,充分运用现代化的信息技术手段,对于英语学习激励信息管理发展的趋势就是信息化,信息化时代下的信息管理 ...
java计算机毕业设计基于安卓Android/微信小程序的大学生学习激励系统APP
项目介绍网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所 ...
微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
微信小程序wepy框架资源汇总
微信小程序wepy开发资源汇总 ! wepy官方仓库 wepy官方文档开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序深大的树洞:基于wepy开发的树洞类微信小程 ...
微信小程序开发：学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存快速开始说明本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...

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