小程序模板網(wǎng)

記一次小程序項(xiàng)目的開發(fā)心得

發(fā)布時(shí)間:2018-06-29 14:58 所屬欄目:小程序開發(fā)教程

只是展示用,建議使用template,組件中涉及到較多的邏輯,建議使用component。 因?yàn)閠emplate沒有自己的js文件,所以在列表中涉及到列表子項(xiàng)獨(dú)立的操作,建議將列表子項(xiàng)寫成component。

示例代碼: page文件

<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList為page傳入的數(shù)據(jù)-->
<template is="statement-goodlist" data="{{goodList}}"/>

2.wxs文件的使用

Wxs更多的是作為一個(gè)過濾器使用,.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的  標(biāo)簽引用。 .wxs模塊中引用其他 wxs 文件模塊,可以使用 require 函數(shù)。

示例代碼 page文件--類似過濾器效果

<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>

3.生命周期

/**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
    // 前進(jìn)-跳轉(zhuǎn)到其他頁面的時(shí)候
  },
  
/**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
onUnload: function () {
  // 后退-點(diǎn)擊當(dāng)前頁面返回的時(shí)候
}

利用這兩個(gè)生命周期可以解決的問題: 防止用戶快速切換頁面(A->B)。導(dǎo)致動(dòng)態(tài)設(shè)置導(dǎo)航欄中的文字顯示出現(xiàn)錯(cuò)誤 快速切換頁面可能導(dǎo)致A頁面中的異步數(shù)據(jù)還未返回,致使當(dāng)切換到B頁面的時(shí)候A數(shù)據(jù)才返回,使得導(dǎo)航欄顯示的文字為A頁面的導(dǎo)航欄標(biāo)題。(即:A頁面的導(dǎo)航欄標(biāo)題為hello,B頁面的導(dǎo)航欄標(biāo)題為world,當(dāng)快速由A->B,此時(shí)雖然在B頁面,但是導(dǎo)航欄標(biāo)題顯示的是hello,而不是world)

參考鏈接: 小程序中的生命周期onHide和onUnload

二、 通信類

如果說數(shù)據(jù)是汽車的話,傳遞的通道或方式就是汽車要行駛的道路。所以,數(shù)據(jù)驅(qū)動(dòng)型的框架,我們少不了要學(xué)習(xí)如何建設(shè)這條"道路",讓"汽車"高速行駛。

1.頁面與組件通信

1-1.頁面?zhèn)鬟f內(nèi)容給組件

page為頁面的屬性名

components 為組件的外部屬性名, 用properties對(duì)象接收

頁面

<!-- Wxml --> 
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
  data: {
      page: '父親pages'
  }
})

組件

父親pages

<!-- Wxml --> 
<!-- Js -->
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    components: { // 屬性名
      type: String
    }
  },
  /**
   * 組件的方法列表
   */
  methods: {
    onTap: function () {
      let page = this.data.components
      console.log(page)  // 我是父親pages
    }
  }
})




1-2.組件傳遞內(nèi)容給頁面

給組件設(shè)置myevent事件,通過this.triggerEvent('myevent', myEventDetail) 觸發(fā)該myevent事件并傳遞內(nèi)容,在頁面用onMyEventshi事件監(jiān)聽傳遞過來的數(shù)據(jù)。

頁面

<!-- Wxml --> 
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
  // 監(jiān)聽myevent事件
  onMyEvent: function (e) {
    console.log('接收a組件傳遞的內(nèi)容:', e.detail) // '我是a組件'
  }
})

組件

<!-- Wxml -->
<!-- 在自定義組件"components-a"中 -->
<button bindtap="onTap">點(diǎn)擊</button>
<!-- Js -->
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = '我是a組件'
      this.triggerEvent('myevent', myEventDetail) // 觸發(fā)組件上的“myevent”事件
    }
  }
})

2.組件與組件通信

兩個(gè)無任何關(guān)聯(lián)的組件:通過全局變量或本地緩存?zhèn)鬟f數(shù)據(jù)

兩個(gè)有關(guān)聯(lián)的組件(同一個(gè)父頁面下): 通過上面的方法,用組件 => 頁面 => 組件 的方式傳遞數(shù)據(jù)。

3.頁面之間的通信

3-1.使用全局變量 app.globalData

3-2.使用本地緩存 wx.setStorageSync

3-3.url傳遞

// A頁面-傳遞數(shù)據(jù)
// 需要注意的是,wx.switchTab 中的 url 不能傳參數(shù)。
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male'
})


// B頁面-接收數(shù)據(jù)
// 通過onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) //  raymond is male
    this.setData({
      option: option
    })
  }
})

3-4.后一級(jí)頁面對(duì)前一級(jí)頁面的數(shù)據(jù)的管理(通過獲取到頁面對(duì)象進(jìn)行數(shù)據(jù)操作)

這個(gè)方法的精髓,是通過獲取到其他頁面的對(duì)象原型, 然后通過原型方法 setData 對(duì)當(dāng)前對(duì)象管理的 data 進(jìn)行修改 ,

示例如下:

// pageE.js
Page({
  data: {
    index: 1
  }
})

當(dāng)跳轉(zhuǎn)到下一個(gè)頁面 F 之后,假定在 F 中有操作需要對(duì) E 中的數(shù)據(jù)有修改,則可以使用以下方法:

// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})

這個(gè)方法可以操作頁面堆棧里面的頁面的數(shù)據(jù), 可以做到讓后一級(jí)頁面對(duì)上級(jí)頁面群的數(shù)據(jù)管理 。

參考鏈接: 愛范兒-頁面之間的數(shù)據(jù)傳遞

4.頁面與模板之間的通信

頁面

<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
  
<!-- JS -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

傳入模板的除了變量,還可以是事件方法對(duì)象。例如,模板中的點(diǎn)擊事件,可以傳遞到使用模板的元素中。

三 、技巧類

1. 索引是變量,修改數(shù)組的值

根據(jù)文檔,采用'array[0].text':'changed data'的格式。但是我們實(shí)際應(yīng)用中需要改變的索引值往往是動(dòng)態(tài)的,所以,改裝一下如下:

示例代碼:

// 修改某個(gè)數(shù)組的動(dòng)態(tài)的值 --- 提前將數(shù)組對(duì)象準(zhǔn)備好
// 索引index是變量, value是變量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24610.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢