阅读本文开始使用小程序（小程序x）

描述

本文介绍了实际的陷阱经验和解决方案。 这也是对我自己项目的回顾。 我就在这里跟大家分享一下。 我希望这对你有帮助。 如果您觉得文章有帮助，请点赞。 谢谢。 对不起标题:)

登录认证

认证（基本信息、手机号码）使用小程序原生的按钮组件并指定 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