说明
文章为实战中踩坑经历，以及解决方案。同时是自己的一个项目回顾，在这里分享给大家，希望能帮助到大家，如果觉得文章对你有用，请点个赞，谢谢！原谅我也是个标题党：）
登录授权
授权（基本信息，手机号码 ）必须使用小程序原生的的button组件，然后指定open-type 后通过回调才能拿到用户信息。代码入下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | index.wxml
<view wx:if="{{!getUserInfo}}">
<view>你还未登录，请先授权登录</view>
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:if="{{getUserInfo && !getPhone}}">
<view>你还未绑定手机号，请先去绑定</view>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
立即绑定
</button>
</view>
index.js
page({
data: {
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
userInfo: {},
getUserInfo: false,
getPhone: false,
hasAuth: false
},
onLoad: async function () {
var that = this;
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
wx.login({
success: loginRes => {
wx.getUserInfo({
success: async function (res) {
}
})
}
})
} else {
}
}
});
},
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
var that = this;
wx.login({
success: async res => {
const aUserModel = new UserModel();
const params = {
code: res.code,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
}
const { data } = await aUserModel.login({ ...params })
if(data.roles){
}
if (data.mobile) {
}
}
});
that.setData({
isHide: false
});
} else {
wx.showModal({
title: '警告',
content: '拒绝授权，您将无法使用小程序',
showCancel: false
});
}
},
getPhoneNumber: async function (e) {
if (e.detail.encryptedData) {
const aUserModel = new UserModel();
const params = {
userId: userInfo.id,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
}
} else {
wx.showModal({
title: '警告',
content: '拒绝授权，您将无法使用小程序',
showCancel: false
})
}
},
})
|
路由
路由跳转的各个方法可以去官网学习，这里提遇到的坑，navigateTo路由跳转最多只能10层，所以使用的时候需要考虑是不是确定需要历史记录。为什么要这么说呢。 场景：一个列表页面（如下图），用户的档案是可以修改的，如果用navigateTo跳转（/page/archivesEdit?id=1923XXXX）,修改保存用navigateTo（/page/archivesList），这样来回编辑跳转10次就不让点击跳转了。
解决：思考那我用2个redirectTo 行不行？redirectTo是关闭当前历史记录跳转到下一页面。造成了我跳转到修改页面点击微信自带的返回是直接跳过列表页面跳转到首页。这个时候测试小姐姐就又要提bug单了。。。
完美姿势： 就是用navigateTo和navigateBack。我再编辑保存的时候返回用navigateBack返回。这样小程序的路由栈就一会在2-3层之间。当然有时候在列表页面会遇到要重新调用接口，这时候路由跳转提供了几个重要的钩子函数onShow，onHide，我们可以在onShow的时候可以调用一下列表的接口。
这2个钩子函数足够我们简单的跳转，更复杂的场景下可以通过存Storage这种存取参数来返回到上一个页面进行操作，感觉不是优雅，但是没有好的办法解决了。
Storage
场景：storage有2种方式获取，当你直接wx.getStorageSync('xxx')获取一个id，去请求接口的可能是获取不到就已经发送请求了，导致出现bug。
因为wx.getStorageSync('xxx')是异步的 我们可以利用 async/await去方便的使用
1 2 3 4 | onLoad: async function (options) {
const editListParams = await wx.getStorageSync('editListParams')
this.findReportDetails(editListParams)
}
|
webView
webview不是在某个页面使用的，当时我以为是类似iframe这种东西嵌入到页面。正确的使用态度是新建一个page页面，然后跳转到这个page去使用。例如跳转到小程序关联的公众号文章：
1 2 3 4 | other.wxml
<navigator url="/pages/webView/webView" hover-class="none">跳转到webView</navigator>
webView.wxml
<web-view src="https://mp.weixin.qq.com/s/xxxx"></web-view>
|
request
微信自带的网络下的request，虽然能拿来就用，如果不封装就会造成代码冗余。大家可自行参考如下封装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | ajax.js
import { baseURL } from '../config/interfaceURL'
class AJAX {
AJAX ({ url, methods = 'GET', data = {} }) {
return new Promise((resolve, reject) => {
this.request(url, resolve, reject, methods, data)
})
}
request (url, resolve, reject, methods, data) {
wx.request({
url: baseURL + url,
method: methods,
data: data,
header: {
'content-type': 'application/json'
},
success: res => {
const code = res.statusCode.toString()
if (code.startsWith('2')) {
resolve(res)
} else {
reject()
const errorMessage = res.data.message
AJAX.showError(errorMessage)
}
},
fail: err => {
reject()
AJAX.showError("网络异常，请稍后重试！")
}
})
}
static showError (errorMessage) {
wx.showToast({
title: errorMessage,
icon: 'error',
duration: 2000
})
}
static serializeLink (obj) {
let temp = '?'
for (let index in obj) {
if(obj.hasOwnProperty(index)){
temp += (index + '=' + obj[index] + '&')
}
}
return temp.substr(0, temp.length - 1)
}
}
export default AJAX
UserModel.js
import AJAX from '../utils/AJAX'
export class UserModel extends AJAX {
login (params) {
return this.AJAX({
url: `/service/api/users/applet/login`,
data: params,
methods: 'POST'
})
}
}
index.js
async onLoad (options){
const aUserModel = new UserModel()
const params = {
code: loginRes.code,
encryptedData: res.encryptedData,
iv: res.iv
}
const { data } = await aUserModel.login({ ...params })
}
|
npm生态以及第三方ui框架
直接通过初始化的微信小程序项目里面没有package.json文件。所以在使用npm install xxx 是没有卵用。所以我们要自己在文件夹根目录下执行npm init 。这时候才能通过微信开发者工具构建npm，构建成功会生成一个目录。推荐用有赞的vant小程序版,社区较活跃，使用起来不会有很多坑。
双向绑定
对于习惯使用vue的开发者来说，少了这个v-model语法糖。在处理表单的双向绑定会显得比较蛋疼。所以还是有必要说下小程序里面的双向绑定是怎么样的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | file:index.js
Page({
data: {
list: []
},
onLoad: function (options) {
},
onInput (e) {
let value = e.detail.value
let temp = e.target.dataset.name.split(',')
let tempKey = temp[1]
let tempIndex = temp[0]
let tempSubIndex = temp[2]
let targetKey = `list[${tempIndex}].children[${tempSubIndex}].${tempKey}`
this.setData({
[targetKey]: value
})
}
})
file:index.wxml
<block wx:for="{{item.children}}" wx:for-item="subItem" wx:key="{{index}}">
<view class="td" style="height: {{ 100 / item.children.length}}%;">
<input placeholder-style="color:#ccccccc;" type="text" placeholder="未填写" value="{{subItem.testResult}}" data-name="{{idx}},testResult,{{index}}" bindinput="onInput"/>
</view>
</block>
|
-图片和-图片授权
这里场景是-一个固定的静态资源图片，网络图片需先配置download域名才能生效,方法如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | savePhoto () {
const _this = this;
wx.getImageInfo({
src: '/static/images/home/Qr.png',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.path,
success (result) {
_this.setData({ show: false });
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
},
fail (err) {
if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
wx.openSetting({
success (settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
_this.savePhoto()
} else {
wx.showToast({
title: '获取权限失败,无法保存图片',
icon: 'success',
duration: 2000
})
}
}
})
}
}
})
}
})
}
|
保存图片也是需要授权的，看代码就完事了。
其他
textarea 在ios上表现会有padding值。我曹 这个就坑了。我采用要不全是textarea或者全是input 这种去实现表单的填写。 其他样式问题也蛮多的，有点ie的味道。！！ 多用flex float去解决一些差异吧~
结语
文章每个点都是开发小程序的时候遇到的问题，本人能力有限，欢迎大家在评论区提问题交流学习。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~