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

骑猪看日落 2022-05-23 09:05 344阅读 0赞

**学习小程序遇到的问题**

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);  
\}

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.  r o o t . 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)