微信小程序學習筆記（一）--創建微信小程序

一、創建小程序

1、申請帳號、安裝及創建小程序，請參照官方文檔里面的操作 https://developers.weixin.qq.com/miniprogram/dev/。

小程序在創建的時候會要求指定文件目錄，后面可以在其他的編輯器中打開代碼。

創建的時候沒有AppID的話，可以先使用一個測試ID。點擊界面下的“使用測試號”生成一個即可。

 

2、創建好的界面如下：

 

二、代碼構成

 

 文件類型

小程序配置 app.json

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。其他配置信息參考 全局配置。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

• pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
• window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等

工具配置 project.config.json

{
    "description": "項目配置文件。",
    "packOptions": {
        "ignore": []
    },
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "minified": true,
        "newFeature": true
    },
    "compileType": "miniprogram",
    "libVersion": "2.0.4",
    "appid": "wxc1d1888819c8e137",
    "projectname": "newWechatProgram",
    "isGameTourist": false,
    "condition": {
        "search": {
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "game": {
            "currentL": -1,
            "list": []
        },
        "miniprogram": {
            "current": -1,
            "list": []
        }
    }
}

具體設置參考 開發者工具的配置

頁面配置 page.json

{
  "navigationBarTitleText": "查看啟動日志"
}

其他配置參考 頁面配置

 WXML 模板

WXML 充當的就是類似 HTML 的角色。打開 pages/index/index.wxml：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

標簽名字：微信直接將常用的view, button, text等，以標簽的形式包裝好，提供給開發者。具體參考 小程序的能力

屬性以及表達式。使用MVVM開發模式，提倡把渲染和邏輯分離。不要再讓 JS 直接操控 DOM，JS 只需要管理狀態即可，然后再通過一種模板語法來描述狀態和界面結構的關系即可。想問文檔參考WXML

如果需要把一個 Hello World 的字符串顯示在界面上，只需要在WXML 這么寫 :

<text>{{msg}}</text>

JS 只需要管理狀態即可:

this.setData({ msg: "Hello World" })

通過 {{ }} 的語法把一個變量綁定到界面上，即數據綁定。僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。

WXSS 樣式

WXSS 具有 CSS 大部分的特性，同時做了一些擴充：

• 新增了尺寸單位：rpx，開發者可以免去換算的煩惱，只要交給小程序底層來換算即可，由於換算采用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
• 提供了全局的樣式和局部樣式，和前邊 app.json, page.json 的概念相同，你可以寫一個 app.wxss 作為全局樣式，會作用於當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
• 此外 WXSS 僅支持部分 CSS 選擇器

更詳細的參考 WXSS

JS 交互邏輯

編寫 JS 腳本文件來處理用戶的操作。

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

index.js中

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

具體參考 WXML事件

微信小程序的API 

小程序的啟動

微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。

 

緊接着通過 app.json 的 pages 字段就可以知道你當前小程序的所有頁面路徑:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

 小程序的在開發者工具中編輯時，程序會在保存代碼文件后自動刷新，不需要另外的啟動命令。

小程序啟動后，在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
  onLaunch: function () {
    // 小程序啟動之后 觸發
  }
})

整個小程序只有一個 App 實例，是全部頁面共享的，更多的事件回調參考文檔 注冊程序 App 。

程序與頁面

pages/logs/logs目錄下有四種類型文件，微信客戶端會先根據 logs.json 配置生成一個界面，頂部的顏色和文字你都可以在這個 json 文件里邊定義好。緊接着客戶端就會裝載這個頁面的 WXML 結構和 WXSS 樣式。最后客戶端會裝載 logs.js。

//logs.js
const util = require('../../utils/util.js');

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

Page 是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程序框架會把 data 數據和 index.wxml 一起渲染出最終的結構，於是得到了我們看到的小程序的樣子。

在渲染完界面之后，頁面實例就會收到一個 onLoad 的回調，你可以在這個回調處理你的邏輯。

有關於 Page 構造器更多詳細的文檔參考 注冊頁面 Page。

組件

編輯器里面只添加了<map></map>，保存后，左側便出現了地圖的效果。

更多組件參考 小程序的組件。