总结微信小程序开发中遇到的坑
总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~
1,页面跳转和参数传递实例
首先说一下我遇到的需求
有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是数据url是要控制跳转到哪个页面,可能是tab页面也可能是非tab页面,但是微信小程序中跳转到tab和非tab页面用的api不是同一个,但是在页面中渲染肯定是要用到循环的,难道要再多个参数来判断是跳转到tab页面还是非tab页面?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
[
{
"id": 2121,
"title": "test",
"body": "test",
"url": "url",
"pic": "pic",
"created_at": "2017-07-01 12:34:56"
}, {
"id": 2122,
"title": "test",
"body": "test",
"url": "url",
"pic": "pic",
"created_at": "2017-07-01 12:34:56"
},
]
|
- 后一般的小程序中我用的框架是wepy,底部的tab组件就是我自己写的,没有用到小程序自己提供的那一个,因为我们还要实现一个需求,有消息时,底部tab会出现小红点,还有以下弹窗要把底部tab覆盖掉,这些需求如果用小程序提供的那一个tab组件的话根本实现不了;而且不用wepy框架的话,自己做一个tab实现的过程很恶心,小程序虽然实现了组件化,但是它实现的组件化bong不想vue和react那样实现的是真正的组件化,你需要哪个组件就直接import进来,小程序的组件化实现可查看官方文档,js,css和html都是要分别引入的
- 自己实现的tab页面整体是一个非tab页面,所有整个小程序中就不存在绝对的tab页面,所以用navigator这个组件,想要跳转到tab页面可以通过在url上拼接参数
1
2
3
4
5
6
|
<view class="mesList" wx:for="{{unReadList}}" wx:key="unique">
<navigator url="/pages/index?tab=0" hover-class="none" >
<text>{{item.body}}</text>
<view class="messageTime">{{item.created_at}}</view>
</navigator>
</view>
|
然后再index页面的onload中判断显示哪个tab
1
2
3
4
5
6
|
onLoad(options) {
if (options && options.tab) {
this.tab = parseInt(options.tab);
this.$apply();
}
}
|
2,微信小程序授权处理
- 微信小程序提示授权弹窗,如果用户第一次点击拒绝之后,一段时间将不会再次弹出来,然后用户又不知道什么原因用不了小程序,这是个很糟糕的用户体验,我们应该优雅的处理这种情况
- 采用的解决方法参考
3, 登录问题的处理
- 两个登录接口,一个get,判断是否已经还需要登录,如果返回true,则需要登录,如果返回false,则不需要登录
- 如果返回true,则需要去请求更一个post的登录接口,这时,你需要获取第一个get请求的返回信息中的session,之后每次请求求都需要带上他
- 在返回true的时候还需要做一件事儿,就是把返回信息中的session存储到storage,即调用setStorage,然后在之后每次请求数据的时候在headers里加上这个字段
1234567891011121314151617181920212223242526272829function getStorage(key) {return new Promise(function (resolve, reject) {// 先判断本地数据存储有没有cookiewx.getStorage({key: key,success: function (res) {resolve(res.data);},fail: function (res) {resolve(null);},});});}function setStorage(key, value) {return new Promise(function (resolve, reject) {wx.setStorage({key: key,data: value,success: function (res) {// TODO: 不知道返回什么resolve(res.data);},fail: function (res) {reject(res.errMsg);},});});}
4,wx.getStorage安卓手机上返回的错误信息是getStorage:fail,ios,getStorage:fail data not found
- 在判断一些api返回的错误信息时,最好不要通过判断具体的错误信息来处理错误
12345678910111213141516171819202122function getStorage(key) {return new Promise(function (resolve, reject) {// 先判断本地数据存储有没有cookiewx.getStorage({key: key,success: function (res) {resolve(res.data);},fail: function (res) {resolve(null);// 下面注释的部分即为刚开始犯的错误,导致有可能ios或安卓或部分机型显示不出数据// if (res.errMsg == 'getStorage:fail' || res.errMsg == 'getStorage:fail data not found') {// console.log('没有cookie');// resolve(null);// } else {// console.log('这是一个问题');// reject(res.errMsg);// }},});});}
5,小程序解决异步
如果项目中没有用到babal,小程序本身的支持只支持到es6的语法,所以解决异步的问题就不能使用es7的async和await,只能使用promise来解决异步,但是每个api上都进行一次封装(如下),这种做法太恶心了
123456789101112function login() {return new Promise(function (resolve, reject) {wx.login({success: function (res) {resolve(res);},fail: function (res) {reject(res.errMsg);},});});}基于微信的API的prototype上进行了promise的封装
123456789101112131415function promiseify(func) {return (args = {}) => {return new Promise((resolve, reject) => {func.call(wx, Object.assign(args, {success: resolve,fail: reject,}));})}}for (const key in wx) {if (Object.prototype.hasOwnProperty.call(wx, key) && typeof wx[key] === 'function') {wx[`_${key}`] = promiseify(wx[key]);}}
6,怎么保证在调用其他接口之前已经调用过登录的接口了
- 我采用执行队列的方式来解决,问题可以简化为有两个按钮,点击第一个按钮输出这是第几次输出d1,但是必须在点击完d2之后,isPrint变为true时,才允许输出,在isPrint为false的时候点击d1,需要把要输出的内容暂时存储起来,等isPrint变为true时,暂存起来的输出现在才可以输出出来
12345678910111213141516171819202122232425262728293031323334// html<div class="first">按钮一</div><div class="second">按钮二</div>// jsconst d1 = document.querySelector('.first');const d2 = document.querySelector('.second');let count = 0; // 用来记录第几次输出let isPrint = false; // 是否允许输出let arr = []; // 声明一个数组,用来存储function clickCount() {count++;console.log('这是第' + count + '次输出d1');}d1.onclick = function () {console.log(isPrint);console.log(arr);if (isPrint) {if (arr.length === 0) {clickCount();} else {for (let i = 0, len = arr.length; i < len; i++) {arr[i]();}}} else {arr.push(clickCount);console.log('不允许输出');}};d2.onclick = function () {isPrint = true;console.log(isPrint);}
6,小程序问题
- 不支持跳转外部链接
- text可以解析/n,
- 目前不支持识别图中二维码,
- 背景图片不能用本地图片,
- wx.navigateTo需要跳转的应用内非 tabBar 的页面的路径
- wx.switchTab跳转到tabBar页面,
- wx.showToast(),icon只支持success和loading,但是支持image,且image优先级高于icon
- tabBar页面A navigatorTo 到页面B,然后B switchTab 到A,这里A会执行onShow();
但是我再从A跳到B再switchTab回来,A就不会再执行onShow()了,
7,总结
- 有时候在开发者工具上测试时是没有问题的,但是真机测试却有问题,所有开发过程中一定要在多个不同型号的手机上测试;很多时候IOS和安卓api返回的信息不同
- 在手机上打开调试的时候是好的,但是关闭调试后就会出现各种bug,遇到这种情况一定要一步步的去排查原因
8,后采用wepy重构小程序遇到的一些坑
wepy文档
1,Q: 怎么在page组件和component组件中回去到getApp(),就是app里面定义的函数,通过this.$parent只能拿到数据,拿不到方法?
A:可以在this.$parent的_proto上拿到方法,即this.$parent.onLogin
2, Q:怎么实现按需加载
A:在compoent组件中自定义生命周期函数,并手动触发
jpg 改 rar
总结微信小程序开发中遇到的坑的更多相关文章
- 解决微信小程序开发中wxss中不能用本地图片
微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- 关于微信小程序开发中遇到的缺少game.json问题的解决
一.小程序开发的两种选项 ①小游戏开发:内部对应的入口配置文件为game.json丶game.wxml之类的文件或者项目. ②小程序开发:内部对应的入口配置文件为app.json丶app.wxml之类 ...
- 微信小程序开发中如何实现侧边栏的滑动效果?
原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...
- 微信小程序开发中的http请求总结
在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- 在微信小程序开发中使用Typescript
Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Type ...
- 【小程序开发】微信小程序开发中遇到的那些坑...
第一坑: 设置了三个tabBar,却默认显示第二个,不能展示我的第一个[首页]. "list": [{ "pagePath":"page/KTGJ/i ...
- [技术博客]微信小程序开发中遇到的两个问题的解决
IDE介绍 微信web开发者工具 前端语言 微信小程序使用的语言为wxml和wss,使用JSON以及js逻辑进行页面之间的交互.与网页的html和css略有不同,微信小程序在此基础上添加了自己的改进, ...
- 微信小程序开发技巧及填坑记录
以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...
随机推荐
- 【转】【Unity】DateTime各种时间字符串
各种表示时间的方法 谢谢网络上的大神 此片为转载的文章 DateTime.Now.ToShortTimeString() DateTime dt = DateTime.Now; dt.ToString ...
- etl数据库查询
//----------------------------------------利用数据库查询按钮查询-------------------------------------------- st ...
- 基于Python的测试驱动开发实战
近年来测试驱动开发(TDD)受到越来越多的关注.这是一个持续改进的过程,能从一开始就形成规范,帮助提高代码质量.这是切实可行的而非天马行空的. TDD的全过程是非常简单的.借助TDD,代码质量会得到提 ...
- android 内存管理机制、异常、垃圾回收
当 Android 应用程序退出时,并不清理其所占用的内存,Linux 内核进程也相应的继续存在,所谓“退出但不关闭”.从而使得用户调用程序时能够在第一时间得到响应. 当系统内存不足时,系统将激活内存 ...
- 关于Cocos2d-x中节点和精灵的关系以及初始化
1.每一个对象类都有一个自己public的一个create函数(等价于CREATE_FUNC),和init函数. 2.create函数返回的是自身的类型,init函数是在ceate函数被调用的时候自动 ...
- MFC CreateWindow介绍
CreateWindow 该函数创建一个重叠式窗口.弹出式窗口或子窗口.它指定窗口类,窗口标题,窗口风格,以及窗口的初始位置及大小(可选的).函数也指该窗口的父窗口或所属窗口(如果存在的话),及窗口的 ...
- mysql_query error:Commands out of sync;you can't run this command now
MYSQL_REST *result没有释放, 用mysql_free_result(result)即可.
- [CS]C#操作word
近期在做的项目已经改了好几版,近期这一版用到了word,当然不是直接使用word,而是使用第三方的ActiveX控件:dsoframer.ocx.此控件的使用和其它控件的使用流程没有不论什么差别.接下 ...
- html中可以自定义属性,,,妈的竟然才知道..
html中可以自定义属性,,,妈的竟然才知道.. <input userinfo="没见过帅哥呀" />
- 【Java面试题】14 super.getClass()方法调用
下面程序的输出结果是多少? import java.util.Date; public class Test extends Date{ public static void main(String[ ...