主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
描述
本文介绍了实际的陷阱经验和解决方案。 这也是对我自己项目的回顾。 我就在这里跟大家分享一下。 我希望这对你有帮助。 如果您觉得文章有帮助,请点赞。 谢谢。 对不起标题:)
登录认证
认证(基本信息、手机号码)使用小程序原生的按钮组件并指定 open[k3 有需要。 ]type 用户信息可以通过回调获取。 请输入以下代码:
index.wxml 您尚未登录。 请先批准登录 您尚未绑定手机号码,请先绑定。 绑定 index.jspage({ // ... 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 => {//用户的code:loginRes.code wx.getUserInfo({ success: async function (res) { // 这里处理业务逻辑 } }) }}) } else { // 用户没有权限 } } }); },bindGetUserInfo: function (e) { // 从 e 获取下一段业务逻辑,无论你需要什么信息 if ( e.detail.userInfo) { // 用户按下了批准按钮 var that = this; // 获取用户信息 wx.login({ success: async res => { const aUserModel = new UserModel(); const params = { code: res.code, cryptoData: e.detail.encryptedData, iv: e.detail. iv } const { data } = wait aUserModel.login({ ...params }) if(data.roles){ // do ... } if (data.mobile ){// Do ... } } }); //如果授权成功,则修改isHide的值,显示实现页面,隐藏授权页面 that.setData({ isHide: false });按下拒绝按钮 wx.showModal({ title: '警告', content: '如果拒绝批准,您将无法使用小程序', showCancel: false } } , getPhoneNumber : async function ( e) { if (e.detail.encryptedData) { //用户按下按钮允许授权 const aUserModel = new UserModel(); const params = { userId: userInfo.id, cryptoData: e .detail. cryptoData, iv: e.detail.iv } // do ... } else { // 用户点击拒绝按钮 wx.showModal({ title: '警告', content: '拒绝审核将导致小程序无法使用', showCancel: false }) } }, // . p>您可以访问官方网站了解不同的根跳转方法。 以下是您可能会遇到的一些陷阱。 NavigateTo 路由跳转最多只能达到 10 级,因此在使用它们时应考虑到这一点。 我不确定历史是否有必要。 为什么这么说? 场景:列表页面(如下图)允许您修改用户的个人资料。 如果使用navigateTo跳转(/page/archivesEdit?id=1923XXXX),请使用navigateTo(/page/archivesList)进行更改并保存,以便您可以编辑和来回跳转。 点击 10 次后,您将无法再跳跃。
解决方案:仔细思考。 我可以使用两个redirectTo吗?redirectTo会关闭当前历史记录并跳转到下一页。 结果,当我跳转到换页页面,点击微信特有的返回功能时,我直接跳过了列表页,跳转到了首页。 这个时候,测试妹子就需要再次提交bug Ticket。 。 。 完美的姿势:只需使用navigateTo和navigateBack。 使用navigateBack 在编辑和保存时向后导航。 这样,小程序的路由栈就放在了2-3层之间。 当然,某些情况下您可能需要在列表页再次调用该接口。 目前,Routing Jump提供了一些重要的钩子函数:onShow和onHide。 可以在onShow时调用列表接口。
存储
场景:有两种方式获取存储。 如果直接运行wx.getStorageSync('xxx') 获取了ID,但是它引入了一个bug,因为请求接口的人在获取ID之前可能已经发送了请求。
由于wx.getStorageSync('xxx')是异步的,所以使用async/await比较方便。
onLoad:异步函数(选项){ const editListParams = wait wx.getStorageSync(& #39;editListParams') this.findReportDetails(editListParams)}
webView
Webview 未在特定页面上使用。 当时,我以为它就像嵌入页面中的 iframe 之类的东西。 正确的使用态度是新建一个页面,然后跳转到这个页面来使用。 例如跳转到小程序关联的公众号文章。
other.wxml跳转到webViewwebView .wxml
请求
微信自带的网络下请求可以开箱即用,但如果不封装的话会出现代码冗余。 您可以自行参考以下包。
ajax.jsimport {baseURL } from '../config/interfaceURL' //baseUrlclass AJAX { AJAX ({ url,messages = 'GET', data = {} }) { return new Promise((resolve,spect) => { this.request(url, 解析, 拒绝, 方法, 数据) }) } 请求 (url, 解析, 拒绝, 方法, 数据) { wx.request({ url:baseURL + url, 方法: 方法, 数据: 数据, header : { 'content-type': 'application/json' }, success: res => { const code = res.statusCode.toString() if (code.startsWith('2')) {solve(res) }否则{ 拒绝()const errorMessage = res.data.message AJAX.showError(errorMessage) } }, failure: err => {reject() AJAX.showError("网络异常,请稍后再试!") } }) } static showError ( errorMessage ) { wx.showToast({ title: errorMessage, icon: 'error', period: 2000 }) } static SerializeLink (obj) { // 序列化 get 请求 let temp = '?&# 39; { if(obj.hasOwnProperty(index)){ temp += (index + '=' + obj[index] + '&') } } return temp.substr(0, temp.length [ k3] 1) }}导出默认AJAX//模型层调用UserModel.jsimport 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.jsasync onLoad (options){ const aUserModel = new UserModel() const params = { code:loginRes.code , cryptoData: res.encryptedData, iv: res. iv } const { data } = wait aUserModel.login({ ...params }) // 杂项}
npm生态及第三方UI框架
微信小程序直接初始化项目。 所以使用 npm install xxx 是没有用的。 所以你必须自己在文件夹的根目录中运行 npm init 。 只有这样你才能通过微信开发者工具构建npm。 构建成功后会生成一个目录。 推荐使用有赞vant小程序版本。 社区更加活跃,使用时的陷阱也更少。
双向绑定
我习惯于两种-方式绑定 开发者请使用vue例如,假设缺少此 v-model 语法糖。 处理表单的双向绑定可能很痛苦。 因此,您应该在小程序中讨论双向绑定。
file:index.jsPage({ data: { list: [] }, onLoad: function (options) { // do ... }, 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}].ch ildren[ ${tempSubIndex}].${tempKey}` this.setData({ [targetKey]: value }) }})file:index.wxml
图片下载及图片下载认证
这里的场景是下载固定的静态资源图片,在启用之前,网络图片必须配置下载域名。
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: '保存成功',图标: '成功', 持续时间: 2000 }) }, 失败 (err) { if (err.errMsg === "saveImageToPhotosAlbum:fail authdeny") { wx.openSetting({ success (settingdata) { if (settingdata.authSetting [ 'scope.writePhotosAlbum']) { _this.savePhoto() } else { wx.showToast({ title: '获取权限失败,无法保存图片', icon: '成功',持续时间:2000 }) } } }) } } }) } }) }
保存图像也需要身份验证。 请检查代码。
杂项
iOS 上的文本区域包括填充值。 这对我来说是一个陷阱。 使用所有文本区域或所有输入填写表单。 类似IE的其他样式问题还有不少。 ! ! 使用更多的flex float来解决一些差异~
结论
本文所有要点讨论的是开发小程序时遇到的问题。 我的能力有限。 欢迎大家在评论区提问,交流学习。 您还可以关注哈享家公众号,获取更多优质文章。
推荐教程:《微信小程序》
PHP快速学习视频免费教程(从入门到精通)
如何学习PHP? PHP应该去哪里学习?快的? 不用担心。 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 一个小而美的小程序脚手架,让您更顺利、更快速地开发小程序(app脚手架)。
- 小程序选择器数据是一个对象数组
- 如何使用Canvas(微信小程序中制作海报的软件)在小程序中绘制海报
- 小程序性能优化实用技巧(小程序性能优化实用技巧有哪些?)
- 微信小程序调用微信认证窗口(微信小程序微信认证)
本文由主机参考刊发,转载请注明:阅读本文开始使用小程序(小程序x) https://zhujicankao.com/123883.html
评论前必须登录!
注册