小程式（一）

阿新 • • 發佈：2020-09-04

頁面結構，app.js和app.json是全域性的檔案，pages是總元件，index是子元件，子元件的路勁在app.json中配置，window是全域性配置的引數

在元件資料夾中右鍵滑鼠點選新建page,自動新建js, json, wxml, wxss,檔案，並且在app.json中會自動引入頁面路徑

小程式的語法
    1)沒有DOM
    2)元件化開發
    3)一個頁面具有幾個檔案:4個
        1.wxml    ->    結構
        2.wxss    ->    樣式
        3.js    ->    行為    ->wxs
         
4.json    ->    配置
    4)全域性具有幾個檔案:
        1.app.js    ->    App(Object)    ->註冊小程式,只能在app.js中呼叫,有且只能呼叫一次
        2.app.wxss->    全域性樣式
        3.app.json    ->    小程式的配置    ->pages    ->註冊頁面的路徑
        4.project.config.json    ->    專案的配置檔案    ->腳手架配置
        5.sitemap.json    ->    配置小程式中所有頁面的檢索規則

小程式中資料讀取與修改

    /*
      1.資料流向
        1.Vue 單向  雙向資料繫結  v-model
        當input框內部的資料被修改時,將data中的資料也修改為相同內容
        :value="msg"  @change="handleChange"
        function handleChange(event){
            let value=event.target.value;
            this.msg=value;
        }
        2.React 單向
        3.小程式  單向
     
*/
    /*
      2.如何修改狀態資料
        1)Vue
          修改:this.msg=234
          讀取:this.msg ->  資料代理
        2)React-> 
          修改:this.setState({msg:234})
            setState同步呼叫,但是效果有可能是同步,有可能是非同步
            1.同步
              定時器+原生事件
            2.非同步
              生命週期函式+合成事件(以駝峰命名法繫結的事件都是合成事件)
          讀取:this.state.msg
        3)小程式
          修改:this.setData({msg:234})  ->  setData同步呼叫,同步修改
          讀取:this.data.msg -> 沒有資料代理

wxml語法

1. 6.1 資料繫結

a) 6.1.1 初始化資料

1. 頁面.js的data選項中

6.1.2 使用資料

模板結構中使用雙大括號 {{message}}
注意事項: 小程式中為單項資料流 model ---> view

6.1.3 修改資料

this.setData({message: ‘修改之後的資料’}, callback)
特點：

a) 同步修改： this.data值被同步修改

b) 非同步更新：非同步將setData函式用於將資料從邏輯層傳送到檢視層（非同步）

事件繫結

6.2.1 事件分類

1) 冒泡事件

a) 定義：冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。

b) 冒泡事件列表：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

2) 非冒泡事件

a) 定義：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。

b) 非冒泡事件：表單事件和自定義事件通常是非冒泡事件

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

6.2.2 繫結事件

bind繫結：事件繫結不會阻止冒泡事件向上冒泡

<view bindtap="handleTap" class='start_container'>

 <text class='start'>開啟小程式之旅</text>

  </view>

catch 繫結: 事件繫結可以阻止冒泡事件向上冒泡

<view catchtap="handleTap" class='start_container'>

 <text class='start'>開啟小程式之旅</text>

  </view>

冒泡；標準事件機制，分為三個階段，捕獲階段（由外到內）---》目標階段（事件原）===》冒泡階段（由內到外）

原生阻止冒泡；e.stopPropagation()

路由跳轉

wx.navigateTo(Object object)

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用wx.navigateBack可以返回到原頁面。小程式中頁面棧最多十層

比如，從index頁面跳轉到log頁面，路由路徑在app.json中，

{
  "pages": [
    "pages/index/index",
    "pages/log/log"
  ],

在index頁面中的html中

 <view bindtap="handleParent"  >
  <text   bindtap="handleChild">你在哪裡</text>
  </view>

js程式碼，點選後，跳轉到log頁面了，此時index頁面還在記憶體中儲存，沒有銷燬，

如果是wx.redirectTo函式，則index頁面已經銷燬了

  handleChild(){
    console.log('child')
    wx.navigateTo({
　　//此時前面必須加個/，代表根路勁，不然報錯
      url: "/pages/log/log",
    })
    // wx.redirectTo({
    //   //路必須到根路徑找，加個/
    //   url: "/pages/log/log",
    // });
  },