Willdark

每一个不曾起舞的日子,都是对生命的辜负

小程序学习的一些笔记(下)

上一篇文章写下来感觉写的太满了,没想到要做的笔记那么多,那就分两篇写吧,写下一些会踩的坑。那就接着上面的写。

15.自定义属性的连字符问题: 如:我有一个自定义的属性data-post-id,系统在编译时会把该自定义属性读成postId(连字符省略,连字符后面的第一个单词大写), 那么问题来了,假如我的自定义属性这样写的data-postId,那么系统编译成会是这样子:postid(会变成小写,只有连字符后面的第一个单词会大写(不包含data-这个连字符))。 所以在js里获取自定义属性的值时就要注意了,要这样写:var postId = event.currentTarget.dataset.postid;(注意这里的postid是小写,获取postId–>undefine)。

16.怎么在把一个值从一个页面传递到另一个页面里去?
接上面15比如说我们吧获取到的自定义属性data-postId的值postId从post.js页面传递到跳转页面post-detail.js里面去,贴代码

post.js

wx.navigateTo({
//把当前postId的值赋给id然后然后传递到跳转页面
url: ‘post-detail/post-detail?id=’ + postId,
})

post-detail.js

onLoad: function (options) {
//option是一个对象参数 传过来的值可以获取到并且赋值给postId属性。
var postId = options.id;
}

17.数据文件出口返回的是一个对象,要调用数据文件里的json数组时需对象.数组名这样,贴代码:

关于数据调用

//js数据文件里有如下的出口定义(如:post-data.js,更多的代码可看上篇)
module.exports = {
postList: local_database,
}
//需要调用数据的js文件(如:post-detail.js)
// 定义一个变量接受外部js穿过来的数据 只能使用相对路径
var postData = require(‘../../../data/post-data.js’);
//在onLoad函数里面加载
onLoad: function (options) {
//写法是postData.postList[]这样的写法。
var pData = postData.postList[idx];
},

18.storage缓存的设置,可以使用wx.setStorageSync同步设置缓存的方法,如

wx.setStorageSync(‘key’, {
game:”荒野行动”,
developer:”丁三石”<.span>
});


清除缓存,清楚指定缓存:wx.removeStorageSync(‘key’);清除全部缓存:wx.clearStorageSync();
(ps:缓存的上限最大不能超过10MB)

19.js文件里不同的函数里面怎么作参数之间的传递?
(1)可以借助一个中转值,比如data,如要把onLoad函数里的id传递到一个自定义函数onTap里面:

onLoad里:this.data.currentId = Id;
onTap里就可以使用currentId的这个值了

(2)为函数设置参数传过去,如

onTap里:onTap:function(currentId){}
onLoad里:this.onTap(currentId);

20.showToast可以显示用户的点击反馈,可具体看API文档,类似的还有wx.showModalwx.showActionSheet

21.一个函数调用另一个函数时要加上this,如在onLoad里面调用onTap,在onLoad里面写this.onTap();即可。

22.关于this的一个问题,有些情况的this的指向要明确,比如说在一个方法的success里面取this的话,它的指向可能不是你预期那样,this的指向与上下的环境有关,怎么解决呢?
在进入success方法之前,把this保存到另一个变量中,如var that = this;然后在success里使用that便可以。

23.函数默认参数event里的target和currentTarget的区别?
(1)target指的是当前点击的组件
(2)currentTarget指的是事件捕获的组件
贴个代码,如:

post.wxml(标签没写完整,会被转译)

swiper catchtap=’onSwiperTap’
swiper-item
image src=’/images/wx.png’ data-postId= “2”/image
/swiper-item
/swiper

post.js

onSwiperTap: function (event) {
//获取当前点击事件的自定义属性的值。
//dataset是所有自定义属性值的集合
var postId = event.target.dataset.postid;
},

这里在函数onSwiperTap中target这里指的是image,而currentTarget指的是Swiper

24.在使用页面跳转时,如果使用redirectTo跳转会不出现选项卡(tabBar),解决办法是把redirectTo改成navigateTo即可。

25.快速新建文件的方法?一个一个建需要好费时间?
试试这样:在app.json配置文件中直接注册,如我直接注册一个不存在的目录和文件:
{“pages”:[“pages/wow/wow”,]}则会在pages目录下直接生成wow目录,并在wow目录下直接生成wow的四种类型文件(.wxml .wxss .js .json)

26.API请求,比如说从获取豆瓣的电影API(18年1月多好像豆瓣禁止小程序访问获取API了,所以实战不了,我踏马的..),不过还是做一下笔记:
(1)配置小程序request合法请求域(微信公众平台丨小程序->设置->服务器域名设置(一个月只能修改5次))
(2)请求数据,如:

wx.request({
url: ‘https://api.douban.com/v2/movie/top250’,
data:{},
method:’GET’,//OPTIONS,GET,HEAD,POST,DELETE,TRACE,CONNECT
header:{
“Content-Type”: “”,//这里填写application/json会出错
},//设置请求的header
})

(3)数据处理,在request方法里的success里作数据处理:
var that = this;//在request外层保存
success:function(res){
that.processDoubanData(res.data);
},
processDoubanData:function(moviesDouban){
var movies = [];
for(var idx in moviesDouban.subjects){
//逻辑代码
}
}
(4)模板之间的数据传递(7-13)

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注