初探小程式

李群彬發表於2018-04-22

前言

小程式的發現越來越勢不可擋，作為前端開發者當然也不能忽略這項技能，最近剛好應朋友需求，跟他一起做個小程式。So，我開始接觸小程式，然後把自己的點點滴滴記錄下來，供大家觀摩，如果不妥的地方，歡迎來捶。

！！內容基本來時官方文件，只是自己稍微做下整理及自己的理解，然後順便分享。

微信小程式官方文件

整體結構

小程式檔案結構主要包括四種 wxml（頁面結構）、js（頁面邏輯）、wxss（頁面樣式）、json（頁面配置）組成。

1、專案目錄結構
2、app.json ---》用來配置當前小程式的所有路由
{
  "pages":[
    "pages/index/index", //預設為開啟的首頁，路由配置就是其對應的檔案路徑
    "pages/logs/logs"
  ],
  "window":{//設定小程式所有頁面頂部背景顏色。文字顏色
    "backgroundTextStyle":"light",//下拉 loading 的樣式
    "navigationBarBackgroundColor": "#fff",//導航欄背景顏色
    "navigationBarTitleText": "WeChat",//導航欄標題顏色
    "navigationBarTextStyle":"black"//導航欄文字顏色
  },
  "tabBar": {//底部選單欄設定
    "color":"red",//設定字型顏色   還可以設定其他很多樣式
    "list": [{
      "pagePath": "pages/index/index",//點選路由
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  },
  "networkTimeout": {//設定網路超時時間，預設都是60000毫秒
    "request": 10000, //請求
    "downloadFile": 10000//檔案下載
  },
  "debug": true //是否開始debug模式
}

複製程式碼

這就是app.json檔案的介紹，非常的清晰明瞭，一次過掉沒什麼問題。

3、JS（邏輯層）的語法

3.1、資料繫結 {{}}

//index.wxml
<view> {{ message }} </view> 
//頁面使用js裡的面變，用雙打括號

<view id="item-{{id}}"> </view>
//
複製程式碼
//index.js
Page({    //建立每個js都是這個建立，為一個Page({})
  data: { //定義當前頁面的變數及初始值
    message: 'Hello MINA!'，
    id:0
  }
})
複製程式碼

3.2、邏輯判斷 wx:if

<view wx:if="{{length > 5}}"> </view>
//使用wx:if  wxml 中無論是執行判斷語句，還是控制true或false屬性都要用雙引號之內

<view>{{"hello" + name}}</view>
複製程式碼

3.3、字串運算 {{""}}

<view>{{"hello" + name}}</view>
//這個較為簡單，就是直接在雙打括號中執行就好了
複製程式碼

3.4、遍歷陣列 wx:for

<view wx:for="{{[0, 1, 2, 3, 4]}}"> {{item}} </view>
/*
  結果：0, 1, 2, 3, 4
*/
//wx:for="{{準備遍歷的陣列}}"
複製程式碼

3.5、app.js 的內容生命週期

//app.js 用來整個專案的的初始化、啟動關閉的監聽及一些請求配置的設定。
App({
  onLaunch: function(options) {
    //當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
    // Do something initial when launch.
  },
  onShow: function(options) {
  //當小程式啟動，或從後臺進入前臺顯示
      // Do something when show.
  },
  onHide: function() {
  //當小程式從前臺進入後臺
      // Do something when hide.
  },
  onError: function(msg) {
  //當小程式發生指令碼錯誤
    console.log(msg)
  },
  //設定全域性變數
  globalData: 'I am global data'
})


other.js
var app = getApp(); //全域性獲取小程式例項
console.log(app.globalData);  // I am global data
複製程式碼

3.6、js的模組化，及設定公共的js工具用

//common.js

function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//這是官方給的例子
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//但是，我更喜歡的寫法是到處一個物件的形式
module.exports = {
  sayHello:sayHello,
  sayGoodbye:sayGoodbye
}


//other.js //應用時
var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})
複製程式碼
4、WXML（結構層）的語法

在檢視層頁面，小程式需要用小程式規範裡的標籤才有效，所以我們只要瞭解這些標籤的使用就可以了。小程式標籤（元件） 那我這邊主要稍微介紹下一些關於標籤的上事件的使用。 因為運用在移動端，所以事件與web端（onclick...）不同。小程式的標籤事件使用者bind繫結，主要有bindtap(點選)、bindlongtap(長按)、bindtouchstart(手指觸控)、bindtouchcancel(手指觸控動作被打斷，如彈窗和來電提醒)、bindtouchmove(手指觸控後移動)、bindtouchend(手指觸控動作結束)


//index.wxml
<view  bindtap="tapName"> Click me! </view>

//index.js
Page({
  tapName: function(event) {
    console.log(event)
  }
})

//每個事件都有一個event引數， 可以獲取到這個事件的大致資訊。

複製程式碼

總結

其實如果寫過vue或react的小夥伴看在看小程式是非常熟悉，只是寫法上有所不同而已，本來想介紹下API部分，但是發現API部分內容很多，其實當我們真正有需要的時候去看下，基本就OK了，所以小程式我個人覺得還不很難，下次再寫這個的話，我會附上點自己的例子及效果圖。給大家直觀的感覺，所以本期的初探小程式就大家介紹這些了。

相關文章