这篇文章将为大家详细讲解有关小程序中的基本操作示例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司 -
西部信息机房，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，
西部信息机房，西南服务器托管，四川/成都大带宽，
服务器机柜，四川老牌ＩＤＣ服务商
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 SevenDream
4.关于image 有事需要渲染图片时，连续的图片会发现图中间有条白缝。如果做商城方面在商品详情中它是切片的话中间有白条很不雅观。在image标签加入display:bolck就好了。
5.关于跳转
//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
})
}
// 写入
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"来解决问题。
关于“小程序中的基本操作示例”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文名称：小程序中的基本操作示例-创新互联
标题网址：
http://bzwzjz.com/article/geeeh.html
