前言

作者本人是一名Android開發(fā)者,前端開發(fā)知識了解不多,小程序正式發(fā)布之后,好奇心的驅(qū)使下,作為一個閑不住的IT男(當(dāng)然還有boss的要求),自然是要擼一擼小程序的,下面記錄下我初入小程序過程中的一些心得和知識點

開發(fā)工具

小程序的開發(fā)工具可以有多種選擇,這里推薦兩個:

• 官方IDE
• EgretWing

官方IDE調(diào)試方便,但代碼提示很差,EgretWing這個工具最新版本支持小程序,代碼提示會比較全面,但是只能預(yù)覽靜態(tài)頁面,無法調(diào)試和運行動態(tài)數(shù)據(jù)(也可能是我不太會用),放一張截圖

小程序的文件結(jié)構(gòu)

小程序整體包含兩個部分

app全局

• app.js 全局邏輯和生命周期處理
• app.json 全局配置
• app.wxss 全局公共樣式

page頁面

• js 頁面邏輯
• wxml 頁面布局
• wxss 頁面樣式表
• json 頁面配置

文件類型總共就只有js wxml wxss json四種,簡單明了

注意:

• 任意頁面必須有.js和.wxml
• 同一頁面的文件需要在同一文件夾下,且文件名相同(僅文件類型不同)
• 使用EgretWing會生成一些ide的配置文件,無需理會

配置

小程序配置使用.json文件

//app.json
{
  "pages": [//指定所有頁面路徑
    "pages/index/index",
    "pages/logs/logs",
    "pages/info/info"
  ],
  "window": {
    "enablePullDownRefresh": true,//全局支持下拉事件
    "backgroundTextStyle": "dark",//窗口背景色
    "navigationBarBackgroundColor": "#000",//導(dǎo)航欄背景色
    "navigationBarTitleText": "WeChat",//導(dǎo)航欄title
    "navigationBarTextStyle": "white"http://導(dǎo)航欄字體顏色
  }
}

//index.json
{
    "navigationBarTitleText": "小程序",
    "enablePullDownRefresh": true
}

• 所有頁面必須在app.json中的pages節(jié)點下注冊,路徑為全路徑
• page.json只支持window節(jié)點下的屬性
• page.json在實際頁面中會覆蓋app.json中的同屬性
• .json文件中不允許任何形式的注釋(上面代碼是個錯誤示范2333)

生命周期

App生命周期

• onLaunch()當(dāng)小程序初始化完成時亮垫，會觸發(fā)onLaunch（注意全局只觸發(fā)一次）
• onShow()當(dāng)小程序啟動慎菲，或從后臺進入前臺顯示，會觸發(fā)onShow
• onHide()當(dāng)小程序從前臺進入后臺，會觸發(fā)onHide

page生命周期

• data 頁面的初始數(shù)據(jù)
• onLoad 生命周期函數(shù)--監(jiān)聽頁面
• onReady 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
• onShow 生命周期函數(shù)--監(jiān)聽頁面顯示
• onHide 生命周期函數(shù)--監(jiān)聽頁面隱藏
• onUnload 生命周期函數(shù)--監(jiān)聽頁面卸載
• onPullDownRefresh 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動
• onReachBottom 頁面上拉觸底事件的處理函數(shù)

其中使用比較多的onLaunch()用來初始化一些全局?jǐn)?shù)據(jù),page.onLoad加載頁面數(shù)據(jù),onPullDownRefresh和onReachBottom處理列表數(shù)據(jù)

頁面布局

頁面布局使用wxml和wxss配和使用,可以使用class和style引入樣式

基礎(chǔ)

//wxml
<view class="container">
  <image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
  <view class="msg">
    <text class="text">描述: {{title}}</text>
    <text class="text">來源: {{source}}</text>
    <text class="text">類型: {{resType}}</text>
  </view>
</view>

//wxss
.image {
  width: 100%;
  height: 60vw;
}

.msg {
  width: 100%;
  padding: 10px;
}

.text {
  display: block;
}

數(shù)據(jù)綁定

小程序中視圖層與邏輯層的關(guān)聯(lián)方式全部都是數(shù)據(jù)綁定,這與Android開發(fā)完全不同,沒有FindViewById,沒有view.setXxx()方法,一開始會不習(xí)慣這種方式

//wxml
<text class="text">描述: {{title}}</text>
//js
data: {
    title: 'this is title'
}

如果需要更新text,則使用setData()方法

that.setData({
    title:"呵呵"
})

• 為什么不直接使用this.setData(),是因為上下文對象不同,后面實際開發(fā)中會提到

wx:for

重復(fù)渲染組件,用于列表或輪播圖(注意:wxml中沒有直接提供列表組件)

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

• 其中默認(rèn)指定index為下標(biāo),item為當(dāng)前項
• {{}}雙括號內(nèi)表示引用data中的數(shù)據(jù)
• wx:for="{{items}} 會重復(fù)渲染items數(shù)組長度個數(shù)的view區(qū)塊,從而形成列表

wx:if

條件渲染,其實就是提前給個條件,滿足條件時才會展示這個view,基本等同于hidden屬性,具體差異可以查看官方文檔

邏輯處理

網(wǎng)絡(luò)請求

wx.request({
  url: 'http://gank.io/api/data/福利/10/1'
  data: {},//請求參數(shù)key:value形式
  method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  header: {}, // 設(shè)置請求的 header
  success: function (res) {
    console.log("請求成功" + res)
  },
  fail: function () {//失敗

  },
  complete: function () {//完成

  }
})

• 請求協(xié)議為https
• 最多只能并行執(zhí)行5個請求
• header中可以指定Content-Type

數(shù)據(jù)綁定與更新

使用app或page下的data存儲數(shù)據(jù),wxml組件綁定data中的數(shù)據(jù),數(shù)據(jù)有更新時使用setData()更新數(shù)據(jù)并刷新界面

//wxml
<view class="container">
  <image src="{{imageUrl}}" class="image" mode="aspectFill"></image>
  <view class="msg">
    <text class="text">描述: {{title}}</text>
    <text class="text">來源: {{source}}</text>
    <text class="text">類型: {{resType}}</text>
  </view>
</view>

//js
Page({
    data: {//定義數(shù)據(jù),用于組件綁定數(shù)據(jù)
        title: '',
        imageUrl: '',
        resType: '',
        source: ''
    },
    onLoad: function (res) {//取值
        this.setData({//更新數(shù)據(jù)并刷新綁定了這些數(shù)據(jù)的組件
            title: res.title,
            imageUrl: res.imageUrl,
            resType: res.resType,
            source: res.source,
        })
    }
})

點擊事件

點擊事件使用bindtap屬性,用來指定一個函數(shù)處理該事件,參數(shù)為event

<view class="item-text" bindtap="itemClick">
//js
bindViewTap: function (event) {
  wx.navigateTo({
    url: '../logs/logs'
  })
},

• 如果需要處理列表中item的點擊事件,則需要知道當(dāng)前的index,即事件傳值,后面會具體說道
• 除了點擊,還要一些其他的事件,具體可以查看官方文檔

這篇就到這里了,下一篇將開發(fā)具體Demo加以記錄分享出來,輪播,列表的實現(xiàn),刷新+分頁,點擊傳值跳轉(zhuǎn)等.

關(guān)于作者

• 簡 書:uncochen
• github:ChenZhen