学习小程序遇到的问题总结

学习小程序遇到的问题

1.小程序中无法长按图片扫描识别公众号二维码，可以通过自带的api中wx.previewImage来进行预览图片的操作，保存至本地后可操作。但例外的是，可以识别小程序码。

2.WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

3.background-image 只能用网络url或者base64 . 本地图片要用image标签才行。

4.多行和单行垂直居中写法。将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

5.在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。
只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容

6. 可通过该标签组件设置滚动区域的属性。

7.let声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。

8.Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态（指resolved/rejected/pending/settled）；否则以该值为成功状态返回promise对象。

9.组件button中去掉边框，背景和border都去掉后，需要对伪类中::after{border: none;}再做处理，才能实现无边框的效果。

10.userInfoReadyCallback是自定义的一个全局函数（官方demo中index页面生命周期函数onLoad中定义）用于防止网络操作延迟导致无法获取并设置相关数据，这样做只要request完成并成功回调success方法，就会执行userInfoReadyCallback自定义的全局函数

11.数组遍历的多种方法，es6和小程序版本里，array.map(function(){}),相比其他的遍历，for in，for of更方便，能取到键，值，不容易报错。
定义：对数组中的每个元素进行处理，得到新的数组；
特点：不改变原数组；
const array = [1, 3, 6, 9];
const newArray = array.map(function (value) {
return value + 1;
});
console.log(newArray);
console.log(array);
类似方法： for in , for , foreach
const newArray2 = [];
for (var i in array) {
newArray2.push(array[i] + 1);
}

const newArray3 = [];
for (var i = 0; i < array.length; i++) {
newArray3.push(array[i] + 1);
}

const newArray4 = [];
array.forEach(function (key) {
newArray4.push(key * key);
})
Array可以使用下标，Map和Set不能使用下标，ES6引入了iterable类型，Array,Map,Set都属于iterable类型，它们可以使用for…of循环来遍历：
var a = [‘A’, ‘B’, ‘C’];
var s = new Set([‘A’, ‘B’, ‘C’]);
var m = new Map([[1, ‘x’], [2, ‘y’], [3, ‘z’]]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + ‘=’ + x[1]);

for…of与for…in的区别：for … in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。
var a = [‘A’, ‘B’, ‘C’];
a.name = ‘Hello’;
for (var x in a) {
alert(x); // ‘0’, ‘1’, ‘2’, ‘name’
}
更好的方式：iterable内置的forEach方法：
var a = [‘A’, ‘B’, ‘C’];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);//’A’,’B’,’C’
});

12.在遍历数组和拼接json数组上，尝试有很多不同的方法。

13.用data数据结合标签的三元展示，控制元素的隐藏显示和样式，做切换和选中处理，需要及时的清空避免覆盖，并关注数据层的操作。

14 出现脚本错误或者未正确调用 Page()
解决办法
//在页面当中的.js文件里面加上

Page({

})
export default class pageIndex extends wepy.page {

}
或

15.globalData = {
userInfo: null,
token:-1
}
例子 取值公共类，this.$root.$parent.globalData.token

16
wx.navigateTo会增加页面栈大小，直到页面栈大小为5
wx.redirectTo不会增加页面栈大小
wx.navigateBack会减少页面栈大小，直到页面栈大小为1
针对不同页面的功能，需要重定向或者需要返回操作的，酌情进行交互使用。
//onePage.wpy
onShow() {
//操作地址后判断
if(this.isBack){
this.initPageData(this.tokenId)
}
}
wx.navigateTo({
url: /pages/main/addrForm?addrId=${id}&token=${tokenId},
success: () => {
that.isBack = true
}
})
//another.wpy
wx.navigateBack({delta:1})
遇到情况，返回出现过的上级页面时候，为了满足刷新操作，又不产生多余页面，跳转时通过上述操作，则点击返回按钮时，利用wx.navigateBack({delta:1})操作，默认返回的上一页，可以避免重新加载并且在onShow中完成刷新操作，不让页面堆栈超过5层
ps: 正常情况，onLoad比onShow先加载，但在返回页面后，页面是加载完成的，onShow先出现，所以可以在这个周期里做异步刷新操作。

17.现在流行数据单双向绑定，小程序使用了单向数据流，如果采用传统的jQuery方式操作数据和视图，开发效率低，开发者不买账。如果采用双向数据流，程序执行效率偏低，而且是逻辑层对象状态不可控。
总体来说，小程序数据视图单向绑定开发模式，让开发者专注于事件处理上，改变对象状态，实现视图更新。

18.禁止小程序原生下拉刷新
json配置里
“enablePullDownRefresh”: false

1. http请求其他网站资源，用原生的js实现

19.
【微信小程序】图片可以加载成功，但是控制台报渲染层网络层错误

Thu May 03 2018 21:14:20 GMT+0800 (中国标准时间) 渲染层网络层错误
VM27762:2 Failed to load local image resource /goods/.png
the server responded with a status of 404 (HTTP/1.1 404 Not Found)
报错原因是因为页面刚刚加载的时候，image的值为空，之所以图片加载成功了，是因为后台的值传过来了
解决报错的方法，给image设置一个默认值或者使用 wx.if条件渲染组件

1. 可以通过loading操作来避免请求加载时候出现的多次加载和抖动，增强体验
   一般可以放在app.wpy父级中，或者在http.js写好的请求接口中，统一放置
   wx.showLoading({
   title: ‘加载中’,
   })

setTimeout(function(){
wx.hideLoading()
},2000)