《微信小程序》入门小程序-商城小demo的实现

这种方式设置数据难道不行吗，这种设置当然是可以的，但是这种设置有一个致命缺陷，就是设置后的数据不会实时的响应式的渲染到页面上，比如；swipers初始时是一个空数组，页面上通过wx:for循环也没有结果，当使用setData()的方式设置值后，那么页面会实时的渲染新结果，如果是通过直接赋值的方式保存结果，那么此时页面是不会对其作出响应的，仍然是渲染的空数组；

页面跳转

---

在小程序中，页面A跳转到页面B，是通过官方提供的跳转方法：wx.navigateTo()，这个方法通常和事件绑定在一起（当然这个不是绝对的，比如需要根据用户是否登录过作为跳转依据，跳转到不同的页面），具体看示例

页面A，对view绑定了一个点击事件，事件类型是bindtap（点击事件），函数是showShopDetail，代表的是当点击这个view之后触发了showShopDetail这个函数

<view

wx:for=“{ {item.desc}}”

class=“right-shop”

wx:key=“index”

data-txt=“{ {shop.text}}”

wx:for-item=“shop”

bindtap=“showShopDetail”>

{ {shop.text}}

这个函数调用了wx.navigateTo进行页面跳转，跳转的同时携带了一个参数title，值是绑定在view上的自定义属性txt的值

showShopDetail(e){

wx.navigateTo({

//url是需要进行跳转的地址

//例子中是跳转到pages目录下shopList目录下的index页面，并携带了一个参数title

url: ‘/pages/shopList/index?title=’+e.currentTarget.dataset.txt,

})

}

新跳转的页面，比如这里是跳转到shopList这个页面，在shoplist这个页面中的onLoad生命周期内可以接收到传递过来的参数，

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

//options中会携带传递过来的参数title

this.setData({

title:options.title

})

//设置页面标题

wx.setNavigationBarTitle({

title: options.title,

})

}

自定义组件

---

概述

小程序同样也支持将功能模块抽象成自定义组件，具体查看自定义组件，类似于页面，自定义组件类似于页面，由 json、wxml、wxss、js 4个文件组成，其中必须要在json文件中声明这是一个自定义组件

{

“component”: true

}

之后，在wxml中编写模版，wxss中编写样式，如果有事件需要传递，那么可以通过triggerEvent()方法进行传递

this.triggerEvent(“事件名”,obj)

如果是接收父组件的属性，那么需要在子组件的js文件中定义名字

Component({

/**

• 组件的属性列表

*/

properties: {

//定义了一个count属性，值的类型是Number类型，这个值是父组件上传递过来的

count:Number

},

/**

• 组件的初始数据

*/

data: {},

/**

• 组件的方法列表

*/

methods: {}

})

接着，在需要调用组件的json文件中新定义一个字段usingComponents，key是调用组件时的标签名，值是对应的组件地址

{

“usingComponents”: {

“number”:“/components/number/index”

}

}

案例