微信小程序开发注意事项

小程序开发


浏览:575 次

小程序中下拉刷新的实现

onPullDownRefresh触发的预防措施:

您需要在当前页面对应的json文件中设置“enablePullDownRefresh”:true,

使用滚动视图时,如果联系人在滚动视图中,并且滚动视图中出现滚动条,则向下拖动不会触发下拉刷新。如果滚动条未出现,则触发下拉刷新。

滚动视图标签上的注释

使用滚动视图时,不能为滚动视图中的第一个子节点设置上边距和外边距。否则,滚动条将出现在滚动视图中,即使内容没有超出该区域。

2.bindcrollcoupler,bindcrolltracker用于监听要触发的滚动范围,也就是说,当滚动页面的scrollTop或scrollLeft小于设置的上限或下限时,每次滚动都会触发监听功能。(因此,不建议在滚动视图中使用这两个侦听器函数来实现下拉刷新和上拉刷新。)

在小程序中使用画布绘制图片

微信小程序中的画布只能绘制本地图片,但不能在服务器上绘制图片(绘制的图片可以在微信开发者工具中正常显示,但不会在真机上显示)。因此,在使用网络映像时,需要先将网络映像路径转换为本地路径。您可以通过wx在成功回调中通过res.path获取返回的本地路径。getImageInfo(OBJECT),然后通过canvasContext.drawImage将图像绘制到指定的画布上。

绘制用户配置文件并在本地保存:

wxml:

<;/画布>

简体中文:

...

创建Canvas(){

设ctx=wx。createCanvasContext('d',this)

让url='https://img.zcool.cn/community/018d4e554967920000019ae9df1533.jpg@900w_1l_2o_100sh.jpg'

wx.获取图像信息({

src:url,

成功:(res)=>{

ctx.drawImage(res.path,0,0,150,100)

ctx.draw()

}

})

}

...

加载(){

this.createCanvas()

}

...

页面设置样式对事件的影响

OnReachBottom:用于监听页面底部的函数

OnPageScroll:用于收听页面滚动的功能

但当页面样式设置为

第页{

高度:100%;

溢出:隐藏;

}

js中的onReachBottom和onPageScroll不再被触发。

OnReachBottom和onPageScroll用于监听整个页面的滚动和底部事件。防止页面滚动的样式将导致这两个事件不被触发。

DisableScroll属性兼容性问题

在页面的相应json中设置disableScroll:true后,可以看到溢出y:hidden;已添加到开发工具中的页面;。真机调试发现,在IOS中无法滚动整个页面,这与开发工具中的效果相同。IOS底部的webview层失去了弹性滚动效果,但该属性在Android中无效。不会再次触发OnReachBottom和onPageScroll。无法再滚动整个页面。我们需要设置样式溢出:auto-webkit溢出滚动:touch;也可以使用滚动视图滚动页面中的内容。

图像样式设置注意事项

最好不要在小程序中将图像的定位模式设置为绝对,否则,当页面滚动时,绝对定位图像将在滚动期间产生滚动加载效果。

关于在本机小程序中使用async/await的说明

由于本机小程序不支持异步/等待,因此如果使用regeneratorRuntime,则会提示错误,并且需要将regenerator runtime引入文件中

从“../../libs/regenerator runtime”导入regeneratorRuntime

...

异步aa(){

让b=等待新的承诺((resolve)=>{

setTimeout(()=>{

解析(33333)

}, 3000)

})

控制台.log(b)

console.log(111)

}

...

小程序的生命周期考虑

属性

描述

触发条件

加载

加载页面时触发

页面是第一次进入,当navigateBack返回时,不会触发上一页的onLoad

打开就绪

页面首次呈现

第一次进入页面,当navigateBack返回时,不会触发上一页的onReady

在Show上

页面显示

所有导航方法

打开隐藏

页面隐藏

导航到

打开卸载

页面卸载

redirectTo、reLaunch、switchTab、navigateBack

当参数附加到路径(/index?A=1&b=2)时,有不同的方法可以在app中获取参数。js和索引。js。通过选项获取路径中相应的参数值。查询.+'app的onLaunch中的“parameter name”。js,并通过选项获取路径中相应的参数值。+'index.js的onload中的“parameter name”。

在app中设置json中的tabBar后,onLoad和onReady只能