微信小程序篇】一. 入門 hello wxapp

微信小程序入門

準備工作

開發工具 微信開發工具下載 https://developers.weixin.qq.com/miniprogram/dev/api/

開發文檔 微信開發文檔 https://developers.weixin.qq.com/miniprogram/dev/api/

建議去了解html語言

1. 創建項目

2. 刪除原有的目錄

2.1 沒錯，爲了瞭解目錄結構，先全部刪了。

2.2 創建基本目錄，訪問index

2.2.1 根目錄創建src/pages/index目錄結構，index下創建index.wxml，inedx.js

index.wxml 輸入 hello wxapp!	// 頁面佈局
index.js   輸入 Page({})	  // 頁面入口

2.2.2 根目錄創建 app.json (必須)

app.json下定義頁面

{
  "pages":[
    "src/pages/index/index"
  ]
}

2.2.3 test

2.2.4 最後在根目錄創建app.js

2.2.4.1 app.js 定義 app的入口

App({
  /**
   * 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
   */
  onLaunch: function () {
    console.log("app launch");
  },
  /**
   * 當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {
    console.log("app onShow");
  },
  /**
   * 當小程序從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {
    console.log("app onHide");
  },

  /**
   * 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息
   */
  onError: function (msg) {
    console.log("app onError");
  }
}) 

2.2.4.2 index.js 定義自己頁面的配置

Page({

  /**
   * 頁面的初始數據
   */
  data: {},
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    console.log("App onLoad");
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function() {
    console.log("App onReady");
  },
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {
    console.log("App onShow");
  },
  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function() {
    console.log("App onHide");
  },
  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function() {
    console.log("App onUnload");
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function() {
    console.log("App onPullDownRefresh");
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function() {
    console.log("App onReachBottom");
  },
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function() {
    console.log("App onShareAppMessage");
  }

})