关于小程序

笔记向文章。
欢迎和各位一起讨论。
如果文章中有错误请指出。
1.一些需要去取data中的变量的操作。
我们可以运用ES6对象解构赋值来做简化。
这样的方法我们不光可以在小程序中使用同样也可以用到vue里面。
// 例子(小程序) let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值 let {
a,b}
= this ;
// vue let {
a,b}
= this.data;
//小程序2.小程序的 组件公共属性 hidden如果不注意看文档的朋友可能就会遗漏这个公共属性。
等于css 中的display:none;
可以运用于频繁切换的节点。
引用官方的话来说：
”一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。
因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
“3.关于text博主刚开始写小程序的时候在wxml中使用格式化文档时踩过的坑 SevenDream SevenDream SevenDream SevenDream4.关于image 有事需要渲染图片时，连续的图片会发现图中间有条白缝。
如果做商城方面在商品详情中它是切片的话中间有白条很不雅观。
在image标签加入display:bolck就好了。
5.关于跳转如果超出最大页面栈处理方法(大于10页) ,将跳转封装。
//utils.js export function navigateTo(url) {
let Type = getCurrentPages().length >= 10 ? '
redirectTo'
: '
navigateTo'
return new Promise((resolve, reject) => {
wx[Type]({
url, success: res => {
resolve() }
, fail: err => {
reject(err) }
, }
) }
) }
// 其他页面js import {
navigateTo}
from '
../../utils/utils'
;
navigateTo('
pages/index/index'
)返回上一页时刷新（例如返回个人中心）wx.switchTab({
url: '
/pages/my/my'
, success:function(){
var page = getCurrentPages().pop();
//当前页面 page.onLoad();
// 调用 onload }
}
)在返回上一页时设置上一页的的值 var pages = getCurrentPages();
// 获取页面栈 var prevPage = pages[pages.length - 2];
//上一页 prevPage.setData(data);
wx.navigateBack({
delta: 1 }
)6.this.setData 如果想改变对象或数组中的一个 //data data: {
obj: {
a: 1 }
, array: ['
1'
] }
, //改变对象 setOBJ:function(){
var name = '
a'
var obj = '
obj.a'
this.setData({
[obj]:2 }
) }
, //改变数组 setArr: function () {
var num = 0 var arr = `array[${
num}
]` this.setData({
[arr]: 2 }
) }
如果我们有个表单需要绑定很多bindinput，运用上面的方案,在加上data-*。
不需要写很多方法了一个就够了 // 写入 data:{
FromOBJ:{
name:'
'
, phone:'
'
, address:'
'
}
}
, onInput: function (e) {
let name = e.currentTarget.dataset.name let value = e.detail.value let valueObj = `FromOBJ.${
name}
`;
this.setData({
[valueObj]:value }
) }
7.封装 wx.request (网上有很多关于wx.requset的封装方案，这里展示楼主的封装方案)//API.js const HTTP_URL = '
https://xxxx.xxx.xxx/'
function Request(url, data={
}
,method='
get'
,ContentType='
application/json;
charset=utf-8'
) {
return new Promise((resolve, reject) => {
wx.request({
url: HTTP_URL.http + url, method: method, header: {
'
Content-Type'
: ContentType, '
xxxx'
: '
xxxx'
// 其他header头 }
, data: data, success: function (res) {
resolve(res.data) }
, fail: function (err) {
reject(err) }
}
) }
) }
export function getApi(data) {
var url = '
/getapi'
;
return Request(url, data) }
// 其他页面js import {
getApi}
from '
../../utils/api'
;
getApi({
a:1,b:2}
).then(res=>console.log(res)).catch(err=>console.log(err))8.其他注意的问题如果运用到了iconfont，是一次性将文件全部放入的话0一定要把iconfont.js删除。
真机的时候会出现报错。
白屏无法加载的情况。
制作动画效果时注意 建议用官方的Animation Api 或者css3的animation 慎用transition最后说一个楼主遇到的坑（可能是我的处理方式不对）。
在map 组件上的层级不要使用高度变化或者宽度变换的动画过度效果，微信Animation Api和css3 transition Animation 属性都会卡桢，卡成ppt。
尽量使用他们（微信api，css3）的"transform"来解决问题。
推荐教程：
《微信小程序》以上就是关于小程序的详细内容，更多请关注php中文网其它相关文章！
微信
分享相关标签：
小程序本文转载于：
简书，如有侵犯，请联系a@php.cn删除
上一篇：
小程序与普通网页开发之间的区别是什么
下一篇：
分析微信小程序底层原理相关文章相关视频小程序页面间传递数据的方式小程序画布canvas隐藏的问题解决微信小程序特有页面间传参方式小程序中解决代码同步执行的问题关于小程序百变小程序组件（下）小程序API接口（一）小程序API接口（二） [温州做小程序]