四时宝库

程序员的知识宝库

有渔老师在小程序开发中碰到的几个问题

以后发表文章,看来得先发布到头条了。因为有渔老师在自己博客发布的文章,被别人转载的不少。被转载后,头条审核就会被认为是旧闻,其实这本来就是有渔老师写的哦。以后注意了,反正以后先发头条,再发布到自己个人博客。

小程序开发,入门简单,但要掌握,还得练习练习再练习。我相信熟能生巧。

1、新添加的目录,有没有添加到app.json的pages里?

"pages":[

"pages/index/index",

"pages/detail/detail"

],

每添加一个页面,就需要把页面的路径写入pages里,写第一行的是小程序的初始首页。

2、pages目录里js的url,要填相对路径

比如pages目录里有index, detail两个子目录。

那么,在index.js里要打开detail页面,url该这么写:

url: ‘../detail/detail’

3、e.target.dataset的小bug

index.wxml里有这么一行代码:

<image src="{{item.image}}" data-id="{{item.id}}" bindtap="bindViewTap"

index.js的bindViewTap函数是这么写的:

bindViewTap(e) {

console.log(e)

wx.navigateTo({

url: '../detail/detail?id=' + e.target.dataset.id

})

},

小程序里是通过data-*,e.target.dataset.*来传递参数的。这里需要注意,data后面的参数,不能用驼峰,只能用小写,否则参数就不能被正确传递,会输出undefined。如下所示:

4、wx:for

wx:for循环数组时,下标变量名默认为index,数组当前项的变量名默认为item。比如:

<view wx:for="{{args}}">

{{index}}: {{item.message}}

</view>

在一个循环体里,需要写多条执行语句的地方,用block wx:for。

<block wx:for="{{[1, 2, 3]}}">

<view> {{index}}: </view>

<view> {{item}} </view>

</block>

5、wx:if 或 hidden

这2者都带有条件渲染的功能。这里,有渔老师就照抄微信官方文档了。

hidden组件始终会被渲染,只是简单的控制显示与隐藏。

而wx:if 之中的模板也可能包含数据绑定,当wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

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

6、使用函数参数

function()里使用函数做为参数,在编程时会带来很多方便。比如下面的getHttpData函数传递了callback函数作为参数:

getHttpData: function(callback){

wx.request({

url: 'api.php',

data: {

x: '' ,

y: ''

},

header: {

'Content-Type': 'application/json'

},

success: function(res) {

callback(res.data)

}

})

}

在调用getHttpData时,这样写可简化不少代码,而且美观。

onLoad: function () {

var that = this

app.getHttpData(function(data){

that.setData({username:data.date})

})

}

7、页面跳转时的参数传递

微信小程序路由(页面跳转)是通过API wx.navigateTo或者wxml中的url参数。比如:

<navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">

而数据接收是在js文件的page里接收的,page生命周期有一个onLoad函数,它就是做一些初始化数据的工作,onLoad函数有一个参数options,我们就可以通过key将数据获取,如下所示:

Page({

data:{

// text:"这是一个页面"

isHiddenToast:true

}

onLoad:function(options){

// 页面初始化 options为页面跳转所带来的参数

console.log(options.title)

console.log(options.message)

},

})

暂时就列这么几条吧。等后面我发现新的坑,再补充到文章后面吧。如果哪位大哥有新的补充,请留言。相互学习,相互提高。谢谢

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接