首页 > 代码库 > 9-简单实例(二)小程序开发中应注意的几个问题

9-简单实例(二)小程序开发中应注意的几个问题

前面,我们比较完整地讲了一个开放“知乎新闻”的实例。为什么说比较完整呢?因为只是那么一篇文章,要完整地讲完,谈何容易。反正有渔老师是没这个能力。下面接着来完善上篇文章,希望读者看完后,能更加深刻地认识微信小程序开发。

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

  "pages":[

    "pages/index/index",

    "pages/detail/detail"

  ],

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

 

2、pages目录里jsurl,要填相对路径

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

技术分享

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

url: ../detail/detail

 

3e.target.dataset的小bug

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

<image src="http://www.mamicode.com/{{item.image}}"  data-id="{{item.id}}" bindtap="bindViewTap"

index.jsbindViewTap函数是这么写的:

  bindViewTap(e) {

    console.log(e)

    wx.navigateTo({

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

    })

  },

 

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

技术分享

4wx: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>

 

5wx: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})

})

}

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

最后,插播一个广告,如果朋友觉得我讲得不错,欢迎加群讨论学习,共同提高: 小程序学习交流 171547625。我在群里可在线解答朋友在小程序开发过程中碰到的一些问题,还会在群里存放一些重要的代码、资料哦。

本文出自 “编程艺术” 博客,请务必保留此出处http://itsart.blog.51cto.com/1005243/1865811

9-简单实例(二)小程序开发中应注意的几个问题