微信小程序错误总结

1.全局变量的配置/使用

初始创建小程序时，你就应该会注意到项目初始化的框架中，根目录下有一个app.js配置文件（其实个人理解为根目录下的文件都是全局配置文件）

配置：我们只需要将全局变量，以数组的形式放到 globalData 中即可。

使用：当你需要在其他js页面中使用所配置的全局变量时：

首先，需要获取应用实例 const app = getApp()
直接对需要的变量赋值，然后正常使用即可例如赋值给imgServer：imgServer: app.globalData.imgServer
当然，也可以在 js 中对应的点击事件中，随时赋值使用

var test_imgServer = app.globalData.imgServer;  //赋值
console.log(test_imgServer )  //使用

2.引用配置文件中的变量，除了使用const外，还有什么方法

微信小程序定义了一项工具文件utils,此文件的js旨在本文件之内有效，当其他子页面想调用其中的js方法或者变量时，需要两步骤：

在utils被调用的js文件中，面向对象的方式模型输出: module.exports={要调用的函数名称：要调用的函数名称 }；
在要调用的js文件中模块化引入utils的js文件var object=require("utils被调用的js文件地址"); 可以输出一下object就能看到被调用的方法。

3.微信小程序向后台请求数据时关于`method: 'POST'`和`method: 'GET'`

Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据
Get是不安全的，因为在传输过程，数据被放在请求的URL中
使用Post传输的数据，可以通过设置编码的方式正确转化中文；而Get传输的数据却没有变化

4.使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

在App.js中获得系统信息:

onLaunch: function() {
 wx.getSystemInfo({
 success: e => {
 this.globalData.StatusBar = e.statusBarHeight;
 let custom = wx.getMenuButtonBoundingClientRect();
 this.globalData.Custom = custom;
 this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
 }
 })
},

在App.json配置取消系统导航栏,并全局引入组件

"window": {
 "navigationStyle": "custom"
},
"usingComponents": {
 "cu-custom":"/colorui/components/cu-custom"
}

在自己的page.wxml页面可以直接调用了


 返回
 导航栏

5.微信小程序关于页面数据传输问题

假如说是A页面数据传给B页面，我用的是URL拼接字符串的方法实现的，这里的Url是指A跳转B页面时的链接路径。在A页面中：

let that = this
//这个this是指当前页面（page）因为page里面包含了当前页面的所有数据
wx.navigateTo({
url: '../../../pages/trade/tradeParticulars/pay/payment/payment?haha=' + JSON.stringify(that.data.courseInfo.pinList) + '&www=' + that.data.courseInfo.name 
/*这里是跳B页面的路径问号后面就是从A页面附带传输的数据不同的数据之间用加号连接，key和值之间也用加
号连接（像这样'&www=' + that.data.courseInfo.name）括号内的内容就代表传过去的一个参数，而且key
值必须用引号包起来*/
})
},

在这里我想区分一下传数组的区别传数组时：要用以下方法： JSON.stringify(that.data.courseInfo.pinList) //把要传递的json对象转化成字符串； 当B页面接收时代码如下：（将下列代码放在onload里面）

var that = this
var haha = JSON.parse(options.haha)
//将接收到的字符串转化成json对象（这里就和后台传输的数据处理方式一样）是数组的话用这种方式接收
var www = options.www
如果不是数组的话就用普通方式接收就好啦（var www = options.www）
that.setData({
haha: haha[0].name,
//这里是你想让数组的哪些东西显示在页面
www: www
//单个的数据就直接拿来用
})

转自：https://www.cnblogs.com/houyi521/p/8026221.html 个人注：除了拼接还能采用全局变量，存到缓冲区等方法

6.ES6 新增的方法 `Object.keys()`

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。如果我们的对象为空，他会返回一个空数组，

if (Object.keys(object).length === 0) {
 return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

7.上传云函数时，出现以下报错：

Error: ResourceNotFound.FunctionName, FunctionName 指定的资源不存在。 (a213ca69-d274-471e-a411-d225e185a597) 解决方法：

在云开发控制-云函数中，手动新建一个同名的函数名
在微信开发者工具中在吧云函数重新上传部署下就可以了

8.openid

wechat2.png

9.微信小程序空判断

判断undefined:

var tmp = undefined; if (typeof(tmp) == "undefined"){ 
 console.log("undefined"); 
}

判断null:

var tmp = null; if (!tmp && typeof(tmp)!="undefined" && tmp!=0){ 
 console.log("null"); 
}

判断NaN:

var tmp = 0/0; if (isNaN(tmp) ){ 
 console.log("NaN"); 
}

说明：NaN 表示非法，如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt()的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。

判断undefined和null:

var tmp = undefined; if (tmp== undefined) { 
 console.log("null or undefined"); }var tmp = undefined; if (tmp== null) { 
 console.log("null or undefined"); 
}

判断undefined、null与NaN:

var tmp = null; if (!tmp) { 
 console.log("null or undefined or NaN"); 
}

提示：一般不那么区分就使用这个足够。

判断空对象让一个对象一开始设为null,通过判断是否为null即可判断。此外，也能通过ES6 新增的方法 Object.keys()判断一个对象是否为空： Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。如果我们的对象为空，他会返回一个空数组，如下：

var a = {}
Object.keys(a) // 我们可以依靠Object.keys()这个方法通过判断它的长度来知道它是否为空。
if (Object.keys(object).length === 0) {
 return false // 如果为空,返回false
}
return true // 如果不为空，则会执行到这一步，返回true

判断 options 是否存在 if(options){ //存在 } else{ //不存在 }

10.错误`Cannot convert undefined or null to object`

错误原因：

Object.keys()中传错了参数
由于undefined和null无法转成对象，所以如果它们作为Object.assign()的参数（只有一个参数），也会报错

11.在返回前一个页面时，刷新前一页面数据

若从A页面跳到B页面（A--->B），在B页面操作完成后需要刷新A页面的数据，有两种思路：（推荐使用第2种方法）

在返回A页面的时候调用A的页面onShow()方法，重新查询加载一次A页面即可，代码为：

onShow: function () {
this.onLoad()；
},

这种方法返回A页面时需要重新加载页面，太慢，太Low！！

这种方法是极力推荐的：在B页面中进行操作的时候就在后台刷新A页面，当返回A页面的时候就不需要再刷新加载A页面了：具体步骤分为两步：
1. 在父页面中添加刷新数据的方法：

    changeData:function(){
     this.onLoad();//最好是只写需要刷新的区域的代码，onload也可，效率低，有点low
    }

2.  在子页面中添加方法：并且在需要的地方进行调用（如success方法中setData之后调用`that.changeParentData()`）

   changeParentData: function () {
     var pages =getCurrentPages();//当前页面栈
     if (pages.length >1) {
     var beforePage = pages[pages.length- 2];//获取上一个页面实例对象
     beforePage.changeData();//触发父页面中的方法
     }
    }

12.使用页面栈修改上一个页面的data数据

两位比较详细的解析： https://blog.csdn.net/mossbaoo/article/details/84786366 https://blog.csdn.net/u012302552/article/details/83305335

13.`collection.watch`实现对云端数据的实时监控

介绍利用collection.watch来实现云端数据的监控过程：https://blog.csdn.net/qq_36696964/article/details/100530080

对于可能遇到的BUG(db.collection(...).where(...).watch is not a function)提出解决方法:

// 生命周期函数--监听页面加载
 onLoad: function (options) {
 const db = wx.cloud.database()
 db.collection('Messages').where({
 name: '老王' //这里通过名字找到Messages数据集合中叫“老王”的那一条数据，也即为要监控的数据
 }).watch({
 onChange: function (snapshot) {
 //监控数据发生变化时触发
 console.log('docs\'s changed events', snapshot.docChanges)
 console.log('query result snapshot after the event', snapshot.docs)
 console.log('is init data', snapshot.type === 'init')
 },
 onError:(err) => {
 console.error(err)
 }
 })
 },

14.微信小程序读取数据超过20，100的限制方法

参考：https://blog.csdn.net/c0411034/article/details/100533151 无论小程序端单次读取数据库最多20条，云函数单次读取数据库最多100条，这是官方限制，是无法突破的，但是如果你能黑进TX改限制，那我倒头便拜。所以解决方案就是把单次查询分解成若干次

15.onReachBottom 事件为什么不能触发?

onReachBottom是你自己写的，页面生成的事件一般都会有onReachBottom事件了，是否被下面的事件覆盖掉，导致你自己写的事件没生效请好好检查你的代码，估计下面还有一个onReachBottom事件

16.关于微信background-image在真机展示不出来的解决方案

解决方法：

只能在wxml中的style中指定background-image，并且url中最前面的/需要去掉。（在wxss中指定无效，加上'/'也会无效）
B.图片转成base64格式

参考： https://developers.weixin.qq.com/community/develop/doc/96c5e4110d3c5512e06b2ddd6dcb8d93 https://www.jianshu.com/p/69d5fe48339d

17.报错：`Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors`。

微信小程序自定义tabbar

这篇文档中的例子会导致控制台报错： VM113:1 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

报错原因：组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

解决方法：

解决办法

提示：

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

18.自定义tabbar

微信小程序自定义tabBar和遇到的一些问题

19.自定义tabbar的tabbar切换之后图标会闪烁情况处理

custom-tab-bar/index.js文件中：

将data中定义得 selected赋值为-1，不让默认选中

tabbar-selected

将methods中得switchTab函数中之前得selected赋值操作删除（注：selected赋值在首页、分类、购物车、我的页面的onShow方法中已赋值过）

tabbar-setData

20.图片上方叠加一个半透明颜色层，并在半透明颜色层上叠加文字

html代码：


    
    
    
    span标签
    
    div标签

Css代码:

.bg_img {
    /*相对位置*/
    position: relative;
    width: 225px;
    height: 152px;
}
 
.ms {
    /*绝对位置*/
    position: absolute;
    background: #a82327;
    /*透明度*/
    opacity: 0.8;
    /*span标签的大小*/
    width: 225px;
    height: 20px;
    /*偏移到div上*/
    left: 0;
    /*span标签下移*/
    bottom: 0.1px;
    text-align: center;
    color: white;
 
    /*copy的别人的代码，我没用到，我没深究其意 */
    /*filter:alpha(opacity=60);*/
    /*-moz-opacity:0.6;*/
}
 
.toumingzi {
    position: absolute;
    background: cornflowerblue;
    /*透明度*/
    opacity: 0.8;
    /*字体居中*/
    text-align: center;
    /*div标签上移*/
    top: 0.1px;
    width: 225px;
    height: 20px;
}

21.微信小程序使用weui扩展组件踩坑

解决办法

22.TypeError: Cannot read property '$router' of undefined at eval

解决办法

微信小程序错误总结

1.全局变量的配置/使用

2.引用配置文件中的变量，除了使用const外，还有什么方法

3.微信小程序向后台请求数据时关于method: 'POST'和method: 'GET'

4.使用自定义导航栏

5.微信小程序关于页面数据传输问题

6.ES6 新增的方法 Object.keys()

7.上传云函数时，出现以下报错：

8.openid

9.微信小程序 空判断

10.错误Cannot convert undefined or null to object

11.在返回前一个页面时，刷新前一页面数据

12.使用页面栈 修改上一个页面的data数据

13.collection.watch实现对云端数据的实时监控

14.微信小程序读取数据超过20，100的限制方法

15.onReachBottom 事件为什么不能触发?

16.关于微信background-image在真机展示不出来的解决方案

17.报错：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors。

18.自定义tabbar

19.自定义tabbar的tabbar切换之后图标会闪烁情况处理

20.图片上方叠加一个半透明颜色层，并在半透明颜色层上叠加文字

21.微信小程序使用weui扩展组件踩坑

22.TypeError: Cannot read property '$router' of undefined at eval

你可能感兴趣的:(微信小程序错误总结)

3.微信小程序向后台请求数据时关于`method: 'POST'`和`method: 'GET'`

6.ES6 新增的方法 `Object.keys()`

9.微信小程序空判断

10.错误`Cannot convert undefined or null to object`

12.使用页面栈修改上一个页面的data数据

13.`collection.watch`实现对云端数据的实时监控

17.报错：`Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors`。