小程序页面和小程序页面组件创建与使用

1新建页面 目录

 

 2新建组件页面

 

 

3 goods-detail.js 文件内容

// pages/goods/goods-detail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    datalist: [{ num: 1, name: 'zhangsan' }, { num: 2, name: 'abdddd' }, { num: 3, name: 'ddddd' }, { num: 4, name: 'aadadfkkkk' }, { num: 5, name: 'niuniu' }]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4.goods-detail.json 文件内容

{
  "usingComponents": {
    "list-test": "../childlist/listtest"
  }
}

5  goods-detail.wxml 文件内容

　

<!--pages/goods-detail.wxml-->
<view>
   <view class="a-order" wx:for-items="{{datalist}}" wx:key="{{index}}">
   <view>{{item.num}}--{{index}}</view>
   <view> {{item.name}}</view>
   </view>

   <text>------------------------------下面是组件显示----</text>
   <list-test datalistdata="{{datalist}}"/>
</view>

　　

6组件文件  listtest.js

// pages/goods/childlist/listtest.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    datalistdata: {
      type: Array
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

7　listtest.wxml

<view>
   <view class="a-order" wx:for-items="{{datalistdata}}" wx:key="{{index}}">
   <view>{{item.num}}--{{index}}</view>
   <view> {{item.name}}</view>
   </view>
</view>

8 运行效果　　

 

本地测试关闭合法域名检测--工具--项目详情