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

1、建立小程序

一、申請賬號、安裝及建立小程序，請參照官方文檔裏面的操做 https://developers.weixin.qq.com/miniprogram/dev/。css

小程序在建立的時候會要求指定文件目錄，後面能夠在其餘的編輯器中打開代碼。html

建立的時候沒有AppID的話，能夠先使用一個測試ID。點擊界面下的「使用測試號」生成一個便可。es6

二、建立好的界面以下：json

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": "查看啓動日誌" }

其餘配置參考頁面配置api

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 只須要管理狀態便可:app

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>，保存後，左側便出現了地圖的效果。

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