小程序目前基礎(chǔ)庫版本2.0.6

如何自定義組件化？

假設(shè)我們要開發(fā)一個(gè)模態(tài)框組件，需要定制彈出消息和按鈕，如何開發(fā)？

在`.json`中`usingComponents`為該文件引用的組件的相對路徑配置。
{
  "component": true,
  "usingComponents": {}
}
...
//.wxml
<view class='wx_dialog_container' hidden="{{!isShow}}">
    <view class='wx-mask'></view>
    <view class='wx-dialog'>
        <view class='wx-dialog-title'>{{ title }}</view>
        <view class='wx-dialog-content'>{{ content }}</view>
        <view class='wx-dialog-footer'>
          <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view>
          <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view>
        </view>
    </view>
</view>
...
//.js
Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
  },
  /**
   * 組件的屬性列表
   * 用于組件自定義設(shè)置
   */
  properties: {
    // 彈窗標(biāo)題
    title: {            // 屬性名
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '標(biāo)題'     // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個(gè)
    },
    // 彈窗內(nèi)容
    content: {
      type: String,
      value: '彈窗內(nèi)容'
    },
    // 彈窗取消按鈕文字
    cancelText: {
      type: String,
      value: '取消'
    },
    // 彈窗確認(rèn)按鈕文字
    confirmText: {
      type: String,
      value: '確定'
    }
  },

  /**
   * 私有數(shù)據(jù),組件的初始數(shù)據(jù)
   * 可用于模版渲染
   */
  data: {
    // 彈窗顯示控制
    isShow: false
  },
  /**
   * 組件的方法列表
   * 更新屬性和數(shù)據(jù)的方法與更新頁面數(shù)據(jù)的方法類似
   */
  methods: {
    //隱藏彈框
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示彈框
    showDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    /*
    */
    _cancelEvent() {
      //觸發(fā)取消回調(diào)
      this.triggerEvent("cancelEvent")
    },
    _confirmEvent() {
      //觸發(fā)成功回調(diào)
      this.triggerEvent("confirmEvent");
    }
  }
})

在小程序中使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值，但不要直接修改它們，應(yīng)使用 setData 修改

如果在該模板中，引入其他模板可以使用 import在該文件中使用目標(biāo)文件定義的template 。 如:在 item.wxml 中定義了一個(gè)叫item的template：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

//在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>import有作用域的概念，即只會import目標(biāo)文件內(nèi)定義的template

父組件如何調(diào)用子組件中的方法？

組件定義完之后，在頁面值引入需要在.josn中配置使用的組件

{
  "usingComponents": {
    "dialog": "/components/Dialog/dialog"
  }
}
//...
.wxml
     <view class="container">
    <dialog id='dialog' 
      title='我是標(biāo)題' 
      content='恭喜你，學(xué)會了小程序組件' 
      cancelText='知道了' 
      confirm='謝謝你'
      bind:cancelEvent="_cancelEvent"  
      bind:confirmEvent="_confirmEvent">
    </dialog>
  
    <button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>

 

當(dāng)我們需要操作組件中的方法是需要在自定義組件中加上一個(gè) id，然后在 js 代碼中使用如下方法：

 

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {
    //獲得dialog組件
    this.dialog = this.selectComponent("#dialog");
  },
 //...
 showDialog() {
    this.dialog.showDialog();
  },

  //取消事件
  _cancelEvent() {
    console.log('你點(diǎn)擊了取消');
    this.dialog.hideDialog();
  },
  //確認(rèn)事件
  _confirmEvent() {
    console.log('你點(diǎn)擊了確定');
    this.dialog.hideDialog();
  }

子組件中如何調(diào)用父組件的方法?

在父組件定義一個(gè)

bindcustomevent="pageEventListener"

在子組件中調(diào)用triggerEvent

  this.triggerEvent('customevent',data)

相當(dāng)于一個(gè)事件發(fā)布訂閱模式，相當(dāng)于vue中 $emit組件事件文檔

路由跳轉(zhuǎn)如何傳值？

模板綁定 data-id點(diǎn)擊跳轉(zhuǎn)路由傳遞id,不同的是id 在currentTarget.dataset對象中

  tapBanner: function (e) {
    if (e.currentTarget.dataset.id != 0) {
      console.log(e)
      wx.navigateTo({
        url: "../detail/detail?id=" + e.currentTarget.dataset.id
      })
    }
  }

是否支持模塊化開發(fā)？

我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js文件，作為一個(gè)模塊。模塊只有通過module.exports或者 exports才能對外暴露接口。

// common.js
function sayHello(name) {
  console.log('Hello ${name} !')
}
module.exports.sayHello = sayHello

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  }

頁面間如何傳遞數(shù)據(jù)?

• 可以獲得上一個(gè)頁面的方法和數(shù)據(jù)，banners就是我們上一個(gè)頁面的swiper中的數(shù)據(jù)

    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2]
    console.log(prevPage)

 

 

• 在跳轉(zhuǎn)頁面后的onload方法中的 options 可以獲取url 中query中的內(nèi)容

如何進(jìn)行數(shù)據(jù)分析？

小程序提供小訪問規(guī)模、來源、頻次、時(shí)長、深度、留存以及頁面詳情等數(shù)據(jù)，具體分析用戶新增、活躍和留存情況，提供小程序的用戶畫像數(shù)據(jù)，包括用戶年齡、性別、地區(qū)、終端及機(jī)型分布 并且如果需要把數(shù)據(jù)接入到自己的服務(wù)中，也可以通過調(diào)用微信接口的方式拿到數(shù)據(jù)：如果需要自定義數(shù)據(jù)，我們可以在小程序中調(diào)用方法：

wx.reportAnalytics(eventName, data)

不過在使用前，需要在小程序管理后臺自定義分析中新建事件，配置好事件名與字段。另外自定義事件的數(shù)據(jù)無法通過接口獲得。

小程序能否運(yùn)行在瀏覽器中？

目前美團(tuán)開源了一套自己的方案：mpvue ，使用 vue 的形式來編寫小程序。并且可以通過改變打包配置的方式，讓同一套代碼可以同時(shí)運(yùn)行在小程序和瀏覽器中。

小程序如何兼容？

小程序的功能不斷的增加，但是舊版本的微信客戶端并不支持新功能，所以在使用這些新能力的時(shí)候需要做兼容。

如果希望用戶在最新版本的客戶端上體驗(yàn)?zāi)男〕绦?，可以這樣子提示

if (wx.openBluetoothAdapter) {
 wx.openBluetoothAdapter()
} else {
 wx.showModal({
   title: '提示',
   content: '當(dāng)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。'
 })
}