技術標籤：小程式

1， 資料繫結，和Vue 一個樣子

在小程式中，一個頁面元件包含四大塊

index.wxss 樣式

index.wxml 結構

index.js 是 資料 ， 生命週期，回撥函式，核心就是（資料繫結，元件化開發）

index.json 是配置資訊！

我們重點關注結構和 資料

index.wxml

<view class="indexContainer">
  <image class="avatarurl" src="/static/images/nvsheng.jpg">
  </image>
  <text class="desc">王騰越是一個調皮的孩子，王雅靜是一個文靜的小丫頭</text>

  <view class="goStudy" bindtap="handletap">
    <text>{{message}}</text>
  </view>

  <view>
    <text wx:if="{{son}}">我是熊大</text>
    <text wx:else>我是光頭強</text>
  </view>
  
  <view>
    <text wx:for="{{courses}}">
      {{item.name}}
    </text>

    <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
      <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
        <text wx:if="{{i<j}}">
          {{i}} * {{j}}= {{i*j}}
        </text>
      </view>
    </view>
  </view>
</view>
 

index.js

// pages/index/index.js
//註冊當前頁面
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    message: "hello world",
    son:true,
    courses:[
      {
        name:"java",
        id:1001
      },
      {
        name: "php",
        id: 1002 
      },
      {
        name: "c",
        id: 1003
      }

    ]
  },
  handletap:function(){
     console.log("王騰越拾到了一個大刺蝟")
    this.setData({
      son:false
    })
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

沒有啥大不了的data 物件裡面放資料，同級目錄可以寫對應的時間處理函式，還有對應的生命週期回撥函式

很簡單！

只要是用到資料繫結，就 用{{}} 大括號來搞定！

{{}} 裡面放要動態繫結的資料就行了！

其中涉及到了加事件的方式

這個沒啥知識點，就是設定資料用 setData

都是一些api 我們忘記了，就回頭查， 小程式都是跟vue 學的，我們掌握原理，api 查就行了，這篇有基礎的可以跳過，

沒基礎的看看得了，算預習下！

小程式的開發思路，就是元件化開發思路！

（內部資料繫結+ 事件監聽+ 生命週期）