小程序文檔整理，入門這一篇就夠了

準備工作

小程序的構成

  1. 小程序的主題部分由三個文件組成，必須放在項目的根目錄
    | 文件 | 必需 | 作用 |
    | :-------- | --------:| :--: |
    | app.js | 是 | 小程序邏輯 |
    | app.json | 是 | 小程序公共配置 |
    | app.wxss | 否 | 小程序公共樣式表 |
    app.js: 每個小程序都需要在 app.js中調用App方法注冊小程序實例，App() 必需在app.js中使用且只能使用一次。
    app.js中生命周期函數實例代碼
App({
  onLaunch (options) {
    // 監(jiān)聽小程序的初始化，全局只觸發(fā)一次
  },
  onShow (options) {
    // 監(jiān)聽小程序啟動或切前臺。
  },
  onHide () {
    // 監(jiān)聽小程序從前臺進入后臺時觸發(fā)。
  },
  onError (msg) {
    //小程序發(fā)生腳本錯誤或 API 調用報錯時觸發(fā)
  }
})

app.json 小程序根目錄下的app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設置網絡超時時間、設置多 tab 等。

{
  "pages": [
  //頁面路由
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo", //導航欄標題文字內容
    "navigationBarBackgroundColor":"#000000", //導航欄背景顏色
    "navigationBarTextStyle":"white", //導航欄標題顏色，僅支持 black / white
    "backgroundColor":"#ffffff", //窗口的背景色
    "backgroundColorTop":"#ffffff", //頂部窗口的背景色，僅 iOS 支持
    "backgroundColorBottom":"#ffffff", //底部窗口的背景色，僅 iOS 支持
  },
  "tabBar": {
  //底部導航設計
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  //網絡請求超時時間
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,//開啟debug模式
}
  1. 小程序的頁面由四個文件組成
    | 文件 | 必需 | 作用 |
    | :-------- | --------:| :--: |
    | js | 是 | 頁面邏輯 |
    | wxml | 是 | 頁面結構 |
    | json | 否 | 頁面配置 |
    | wxss | 否 | 頁面樣式表 |

語法功能介紹

wxml功能介紹
@(數據綁定)[簡單綁定,組件屬性,控制屬性,關鍵字,三元運算,列表渲染,條件渲染]

  • 簡單綁定

    數據綁定使用雙大括號將變量包起來，然后再js中data中使用,如：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello world!'
  }
})
  • 組件屬性(需要寫在雙引號內)
<view id="item-{{id}}"> </view>
Page({
  data: {
    id: 0
  }
})
  • 控制屬性(需要在雙引號之內)
<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})
  • 關鍵字(需要在雙引號之內)

true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

特別注意：不要直接寫checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

  • 列表渲染 wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為 index數組當前項的變量名默認為 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
  • 條件渲染 wx:if

在框架中，使用 wx:if=""來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個<block/> 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： <block/>并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

模塊化開發(fā)

@(require)[module,exports]

  • require(string path) 用于引入模塊 path 放入需要引入的模塊文件的相對路徑，或者npm模塊名，或者npm模塊路徑。不支持絕對路徑
  • module.exports或者exports 用于對外暴露接口
  • 實例代碼
// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

// index.js
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('hello')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('goodbye')
  }
})

網絡請求

  • wx:request 發(fā)起https網絡請求
    | 屬性 | 類型 | 默認值 | 必填 | 說明 |
    | :-------- | --------:| :--: | :--: | :--: |
    | url | string | | 是 | 開發(fā)者服務器接口地址|
    | data | string/object/ArrayBuffer | | 否 | 請求參數 |
    | header | Object | GET | 否 | 設置請求的 header，header 中不能設置 Referer,content-type 默認為 application/json|
    | method | string | json | 否 | HTTP請求方法 |
    |dataType | string | text | 否 | 返回數據格式|
    |responseType| string | text | 否 | 響應的數據類型 |
    |success | function| | 否 | 接口調用成功的回調函數|
    |fail | function| | 否 | 接口調用失敗的回調函數|
    |complete| function| | 否 | 接口調用結束的回調函數(成功失敗都會執(zhí)行)|

  • methods的合法值
    @(OPTIONS)[GET,POST,HEAD,PUT,DELETE,TRACE,CONNECT]

wx.request({
  url: 'xxx.php', 
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

路由跳轉

  • wx.navigateTo

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

wx.navigateTo({
    url:'頁面的路由',
    //跳轉的頁面不能為tabbar, 路徑后可以帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔；如 'path?key=value&key2=value2'
    succrss:function(res){
    //成功的回調
    },
    fail:function(res){
    //失敗的回調
    }
})

父子組件通信

  • 創(chuàng)建組件
  • 右鍵新建 Component,創(chuàng)建組件，和正常創(chuàng)建page類似，創(chuàng)建名為child1的組件，如下:

默認組件的js文件：

// component/child1/child1.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
  },
  /**
   * 組件的初始數據
   */
  data: {
    paramsOne:String
  },
  /**
   * 組件的方法列表
   */
  methods: {
  }
})
  • 在你需要引入的頁面的json文件中引入，child1是自定義的標簽名，后面跟著路徑，一定要寫在usingComponents中
{
  "usingComponents": {
    "child1": "../../component/child1/child1"
  },
  "navigationBarTitleText": "詳情"
}
  • 在要引入的頁面wxml中，用你自定義的標簽名<child1 />就可以引入了
<view>
    <child1 />
</view>
  • 父子組件傳值--------------父向子傳值

創(chuàng)建child2組件 ，在child1中按上述方法引入
聲明:child1為父組件，child2為子組件

<!--component/child1/child1.wxml-->
<view>
    <text>child1組件</text>
    <child2 paramsTwo="從父組件傳入子組件的數據" /> 
    <!--這是child2組件-->
    <!--paramsTwo是自定義的參數，用來綁定當前的數據，傳入子組件-->
</view>

<!--component/child2/child2.wxml-->
<text>{{paramsTwo}}</text>

// component/child2/child2.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
  /**子組件設置參數接收，參數名與child1中的<child2 paramsTwo=""/>標簽參數一致**/
    paramsTwo: String
  },
})
  • 父子組件傳值--------------子向父傳值

聲明:child1為父組件，child2為子組件
要讓子組件給父組件傳參，首先得在父組件引入子組件的時候，在父組件中加個觸發(fā)事件，如下：

<!--component/child1/child1.wxml-->
<view>
    <view>接收子組件傳來的數據：{{paramsOne}}</view>
    <child2 paramsTwo="從父組件傳入子組件的數據" bind:myEvent="onMyEvent" />
</view>

myEvent就是綁定的觸發(fā)事件,paramsOne是接收子組件的變量，寫在js文件的data中即可，然后時間觸發(fā)時候執(zhí)行 onMyEvent()方法，在onMyEvent()方法中把子組件傳來的值賦值給 paramsOne,如下：

// component/child1/child1.js
Component({
  properties: {
  },
  data: {
    paramsOne:String,
  },
  methods: {
    onMyEvent:function(e){
      this.setData({
        paramsOne: e.detail.paramsOne
      })
    }
  }
})

子組件里面可以寫個觸發(fā)事件來觸發(fā)父組件中的myEvent，比如寫個button在按鈕點擊的時候通過 triggerEvent方法將事件和值代入父組件，如下：

<!--component/child2/child2.wxml-->
<button bindtap='change'>向child1中傳入參數</button>

// component/child2/child2.js
Component({
  methods: {
    change:function(){
      this.triggerEvent('myEvent', { paramsOne:'123'})
    }
  }
})

triggerEvent在點擊之后被觸發(fā)，將myEvent事件和參數傳入父組件，在父組件中，通過bind綁定的myEvent被激活后開始執(zhí)行父組件中的onMyEvent方法。onMyEvent通過打印e.detail.paramsOne就能拿到子組件中的值，然后通過this.setData({})把接收的值 賦值給 父組件中的變量，子父組件通信完成。

ps: 觸發(fā)事件 ----triggerEvent 內容補充

自定義組件觸發(fā)事件時，需要使用 triggerEvent 方法，指定事件名、detail對象和事件選項 實例代碼：

<!-- 在自定義組件中 -->
<button bindtap="onTap">點擊這個按鈕將觸發(fā)“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail對象，提供給事件監(jiān)聽函數
      var myEventOption = {} // 觸發(fā)事件的選項
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內容