提纲：

滚动穿透

登陆，授权流程

手机号授权流程

保存图片

webview的使用

问题一二针对于，弹窗内容嵌套在蒙层内。

1. 点击弹窗外关闭，

你已经购买过该课程

您已经购买该课程了，请前往听课

去听课

// 已经支付的弹窗

togglePaidModal: function(e) {

this.setData({

hasPaid: !this.data.hasPaid,

})

},

handleTap2: function(e) {

},

复制代码

重点在于小程序事件中，catchtap 会阻止冒泡。详情可以浏览微信小程序事件机制。

2. 解决滚动穿透问题

preventTouchMove: function() {

}

复制代码

滚动穿透问题，最外层modal中，添加catchtouchmove="preventTouchMove"。阻止父级滚动。

3. 登陆， 授权流程

userInfo常见的维护于app.globalData中，或者storage中。本文维护于app.globalData中。

3.1 首先需要弄清楚下面几个东西。

(1)wx.login，调用接口获取登录凭证(code)，通过凭证进而换取用户登录态信息，包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等(前端只需把code传给后端，换取凭证后端来做)。

(2)code，登录凭证。这个直接通过wx.login就可以拿到，不用点击button授权。

(3)openid，用户唯一标识。把code传给后端，后端根据加密算法和微信接口服务换取来的。

(4)wx.checkSession。检查登录态是否过期。通过wx.login接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序，用户登录态越有可能失效。反之如果用户一直在使用小程序，则用户登录态一直保持有效。开发者只需要调用wx.checkSession接口检测当前用户登录态是否有效

(5)authSetting['scope.userInfo']，判断用户是否授权过，此授权和以上的code换取openid不同，此授权是指拿到用户头像，city，country，gender，nickName，province等等

(6)open-type="getUserInfo"，对于button的设置，只有添加该条属性，才可以弹窗确认授权，获取到用户相关信息。

所以，所谓的登陆，授权其实是分为两部分。登陆：code换取oppenid，作为用户唯一标识，进行以后的业务(通常是放在header中)。授权：通过button获取授权，拿到用户信息，传给后端用来更新，记录用户信息。

3.2 登陆： code换取openid

附上一张小程序官方截图，红色标识，为我们需要注意的。

通过wx.login获取code，在通过code传给后端接口，换取openid等信息，存进app.globalData中。这样就算登陆完成了，下次请求别的业务接口，带上openid就可以了。(建议使用自定义登录态，不直接使用openid)

this.userLoginPromise = new Promise((resolve, reject) => {

let loginSuccess= false

wx.checkSession({

success: () => {

loginSuccess = true

},

complete: () => {

if (loginSuccess && this.globalData.userInfo.openid) {

resolve()

}else {

wx.login({

success: res => {

if (res.code) {

getOpenIdReq(encodeURIComponent(res.code)).then(response => {

this.globalData.userInfo = {

...this.globalData.userInfo,

...response,

}

resolve()

// }

}).catch(e => {

reject(e)

})

}

},

fail: e => {

wx.showToast({

title: "登录出错",

duration: 2000,

icon: 'none',

})

}

})

}

}

})

})

复制代码

3.3 授权：主要目的为了，获取用户头像，性别，城市，等信息，保存在后端或者是需要显示个人头像等情况。

流程：

判断用户是否授权过(wx.getSetting)

授权过可以直接通过wx.getUserInfo拿到信息。

如果没有授权过，需要配合button拿到用户信息。

// 查看用户是否授权过

wx.getSetting({

success: res => {

if (res.authSetting['scope.userInfo']) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

wx.getUserInfo({

success: res => {

this.setData({

maskModal: false, // 授权过，隐藏授权button

})

}

})

}

}

})

复制代码

如果没有授权，展示授权button，通过wx接口，获取用户信息，并发送请求给后端，更新用户信息成功后，将授权button隐藏。open-type="getUserInfo"

// wxml

// js

bindGetUserInfo: function(e) {

const { encryptedData } = e.detail

if(!encryptedData){

return

}

this.updateUserInfo(e.detail)

this.setData({

maskModal: false,

})

},

// 后端接口更新用户信息

updateUserInfo: function(options = {}) {

const { encryptedData, iv, userInfo } = options

const params = {

...userInfo,

iv,

encryptedData,

}

updateUserinfoReq(params).then(res => {

})

},

复制代码

4. 手机号授权流程

建议后端提供一个，判断用户是否绑定手机号的接口。之后处理起来就比较容易一些。也符合正常流程。

注意点：

把请求到的是否授权手机号表示，维护在app.globalData中，无论在任何组件内部，都可以直接拿到使用。

要在请求登陆接口返回openid以后调用是否授权手机号接口，因为后端需要根据header中的openid来辨识用户。

初始化：

// app.js

userPhonePromise: null,

onLaunch: function() {

this.userPhonePromise = new Promise((resolve, reject) => {

// 放在用户登陆接口之后

this.userLoginPromise.then(_ =>

validateMobileReq()

).then(response => {

this.globalData.phoneAuthorized = !!response

resolve();

if (this.globalData.phoneAuthorized){

console.log('手机已授权')

}else{

console.log('手机未授权')

}

}).catch(e =>{

reject()

})

})

},

// 页面内的使用 class.js

onShow: function (options) {

app.userPhonePromise.then(_ => {

// 本页面用到的变量标识

this.setData({ phoneAuthorized: app.globalData.phoneAuthorized })

})

},

复制代码

当页面中存在，手机授权按钮时，授权后需要更新app.globalData的数据以及当前页面的状态

// button 授权弹窗事件回调

getPhoneNumber: function (e) {

// 是否授权

if (!e.detail.encryptedData) {

return

}

this.updateUserPhone(e.detail)

},

updateUserPhone: function (options = {}) {

const {

encryptedData,

iv

} = options

const params = {

...app.globalData.userInfo,

iv,

encryptedData,

}

// 后端更新用户信息请求

updateUserinfoReq(params).then(res => {

const {

phone,

...others = {}

} = res

app.globalData.userInfo = {

...app.globalData.userInfo,

...others,

phone,

}

if (phone) {

// 全局维护的授权，方便其他页面进入调用

app.globalData.phoneAuthorized = true

// 本页面维护的授权状态标识

this.setData({

phoneAuthorized: true,

})

}

})

},

复制代码

5. 保存图片流程

注意事项：

先查看是否有权限保存图片。(1. 如果没有授权过，会拉起小程序授权弹窗(图一)；2. 如果之前拉起过授权弹窗， 给了保存权限，会保存到手机；3. 如果之前拉起过授权弹窗，但是拒绝了权限访问，这次不会拉起系统弹窗，只会返回false值。需要手动拉起微信设置权限(图二))

保存图片入参filePath，图片文件路径，可以是临时文件路径或永久文件路径 (本地路径) ，不支持网络路径。所以后端返回的图片，需要先调用wx.getImageInfo转为临时文件路径

saveWxImg: function (e) {

wx.showLoading({

title: '加载中...',

})

wx.getSetting({

success: (res) => {

if (res.authSetting['scope.writePhotosAlbum']) {

this.saveImg()

} else {

wx.authorize({

scope: 'scope.writePhotosAlbum',

success: () => {

this.saveImg()

},

fail: (err) => {

wx.hideLoading()

this.toggleModal()

}

})

}

}

})

},

saveImg: function () {

wx.getImageInfo({

src: this.data.classTeacherWxUrl,

success(res) {

const {

path,

} = res

wx.saveImageToPhotosAlbum({

filePath: path,

success(res) {

wx.hideLoading()

wx.showToast({

title: '已保存，扫一扫图片添加班主任吧',

duration: 2000,

icon: 'none'

})

},

fail() {

wx.hideLoading()

}

})

},

fail() {

wx.hideLoading()

}

})

},

复制代码

6. 小程序中webview的使用(个人类型的小程序暂不支持使用。)

正常小程序page中，跳转到webview页面，带上将要访问的url即可。

const webviewUrl = `/pages/classWeb/classWeb?path=${url}&originPage=${originPage}&unitId=${trialTeachUnitId}`

wx.navigateTo({

url: webviewUrl,

})

复制代码

webview页面中，显示url

onLoad: function (options) {

const {

path,

} = options

if (path.indexOf('http') < 0) {

options.path = 'https://' + options.path

}

this.setData({

url: decodeURIComponent(options.path)

}

},

复制代码

7. component的使用需要在${page}.json中引入，其他没什么特殊的地方。

// home.json

{

"usingComponents": {

"class-list": "/components/class-list/class-list",

"tab-bar": "/components/tab-bar/tab-bar"

}

}

复制代码

8. 微信提供了wx.getSystemInfo和wx.getSystemInfoSync访问设备信息，区分ios，android。

9. 特殊字体family的使用，

UI给到TTF，WOFF等字体文件后，访问transfonter.org/转换成base64。导出改为font.wxss。

在app.wxss中引入，之后就可以直接使用了。

// app.wxss

@import "./font.wxss"

// font.wxss

@font-face {

font-family: 'DIN Alternate';

src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAEAAAAAAAAAAAkJwgAAAAA1fCHZQAAAADWQ16c) format('woff'),

url('DINAlternate-Bold.ttf') format('truetype');

font-weight: bold;

font-style: normal;

}

复制代码

10. 动态设置当前页面的标题

wx.setNavigationBarTitle({

title: '当前页面'

})

复制代码

未完待续

小程序中使用锚点注意事项