我是靠谱客的博主 平常奇迹,这篇文章主要介绍关于小程序,现在分享给大家,希望可以做个参考。

笔记向文章。欢迎和各位一起讨论。如果文章中有错误请指出。

复制代码
1
2
3
4
5
6
// 例子(小程序) let a = this.data.a; let b = this.data.b; // ES6对象解构赋值 let {a,b} = this ; // vue let {a,b} = this.data; //小程序
登录后复制
复制代码
1
2
<view hidden="{{false}}"></view> <!-- false 为显示 true为隐藏 -->
登录后复制

引用官方的话来说:”一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。“

复制代码
1
2
3
4
5
6
7
<!-- 这样的写法会出现换行的效果 --> <text> SevenDream SevenDream </text> <!-- 如果不需要换行的效果--> <text>SevenDream SevenDream</text>
登录后复制
复制代码
1
<image src="xxx.png" style="display:block"></image>
登录后复制

5c642fc3f151384489289cc150faf5e.png

  • 如果超出最大页面栈处理方法(大于10页) ,将跳转封装。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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')
登录后复制
  • 返回上一页时刷新(例如返回个人中心)

复制代码
1
2
3
4
5
6
wx.switchTab({ url: '/pages/my/my', success:function(){ var page = getCurrentPages().pop(); //当前页面 page.onLoad(); // 调用 onload }})
登录后复制
  • 在返回上一页时设置上一页的的值

复制代码
1
2
3
4
5
6
var pages = getCurrentPages(); // 获取页面栈 var prevPage = pages[pages.length - 2]; //上一页 prevPage.setData(data); wx.navigateBack({ delta: 1 })
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//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-*。不需要写很多方法了一个就够了

复制代码
1
2
3
<input data-name="name" bindinput="onInput" value="{{FromOBJ.name}}"> <input data-name="phone" bindinput="onInput" value="{{FromOBJ.phone}}"> <input data-name="address" bindinput="onInput" value="{{FromOBJ.address}}">
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 写入 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 }) }
登录后复制
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//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))
登录后复制
  • 如果运用到了iconfont,是一次性将文件全部放入的话0一定要把iconfont.js删除。真机的时候会出现报错。白屏无法加载的情况。

  • 制作动画效果时注意 建议用官方的Animation Api 或者css3的animation 慎用transition

  • 最后说一个楼主遇到的坑(可能是我的处理方式不对)。在map 组件上的层级不要使用高度变化或者宽度变换的动画过度效果,微信Animation Api和css3 transition Animation 属性都会卡桢,卡成ppt。尽量使用他们(微信api,css3)的"transform"来解决问题。

推荐教程:《微信小程序》

以上就是关于小程序的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是平常奇迹最近收集整理的关于关于小程序的全部内容,更多相关关于小程序内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(123)

评论列表共有 0 条评论

立即
投稿
返回
顶部