微信小程序

一、簡單瞭解

1.常用api

<https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E4%BD%93%E9%AA%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F>

官方示例源碼地址：

<https://github.com/wechat-miniprogram/miniprogram-demo>

pages每個文件夾就是一個頁面:

2.常用ui地址

https://weui.io/#

二、微信小程序應用配置

根目錄

app.json界面外觀

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

"backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }

pages

設置頁面

window

設置導航欄，設置下拉刷新

debug:

debug: true 調試模式

app.js:

//app.js
var obj = {
  onLaunch: function () {
    // 展示本地存儲能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        // 發送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之後才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
}
//調用了一個App的方法
App(obj)

//調用App方法的作用是用來創建應用程序實例對象

//定義應用程序的聲明週期事件

wxss

寫一些樣式的文件

頁面結構

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

log.json 覆蓋app.json裏面的全局外觀配置。

page.json

頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。文件內容爲一個 JSON 對象

注意：只能設置 window的配置，不能設置pages和debug的參數

標籤欄

在app.json中設置tabBar.

tabBar中list設置2-5個標籤

"tabBar": {
      "list":[{
        "pagePath":"pages/index/index",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      }
      ]     
}

 "tabBar": {
    "color": "#444",
    "SelectedColor": "#219BF3",
    "backgroundColor": "#e0e0e0",
    "borderStyle": "white",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath":"images/1.png",
        "selectedIconPath":"images/3.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "images/1.png",
        "selectedIconPath": "images/3.png"
      }
    ]
  },

三、邏輯層與界面層分離架構

邏輯層:

界面層

邏輯層的JavaScript

和普通的js的差別:

1：沒有bom和dom

2：小程序的js有一些額外的成員

App 方法用於定義應用程序實例對象
Page方法用於定義頁面對象
getApp 方法用於獲取全局應用程序對象
getCurrentPges 方法用來獲取當前頁面的調用棧（數組，最後一個是當前頁面）
wx對象用來提供核心Api的:

專門的頁面介紹:https://developers.weixin.qq.com/miniprogram/dev/api/

//console.log(wx)

小程序的js是支持commonjs規範的:

//const foo = require(’./utils/foo.js’)

//foo.say(‘world’)

演示: getApp

app.js中:

定義個foo方法:

index.js中:直接調用:

打印結果如下:顯示已經調用成功。

演示 getCurrentPages()

演示符合commonjs規範

在utils下建個foo.js

function say(msg){
  console.log('Hello' + msg)
}
//導出say方法
module.exports = {
  say: say
}

在app.js中調用:

看下運行效果:

總結就是: 一個export 一個 require

不支持export.xxx；只支持module.exports

演示 wx對象

在app.js中

console.log(wx)

效果:

界面層（數據綁定）

數據綁定

數據綁定–元素上綁定

index模塊

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

Page({
  //爲頁面提供數據的
  //data就是界面和邏輯之間的橋樑
  data: {
    message: 'Hello World',
    person:{
      name:"小胡"
    }  
  }

})

<!--index.wxml-->
<!-- 框架最大的特點，就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
  1.數據在哪 (當前頁面對象的data 屬性中）
  2.綁定到哪裏去（想綁定到哪就在哪裏用mustche語法輸出）
 -->
<view class="container">
    <!-- 這種{{}}的語法叫做小鬍子語法 -->
    <text>{{message}}</text>
    <text>{{person.name}}</text>
</view>

頁面效果:

數據綁定–屬性上綁定數據

/**index.wxss**/
.hello{
  width: 100px;
  height: 100px;
  background-color: pink;
}

看下效果:

源碼地址:

https://github.com/hufanglei/wx-demo/tree/attr-bind

數據綁定–屬性上綁定數據–拼接數據

注意: world後面有空格。

/**index.wxss**/
.hello{
  width: 100px;
  height: 100px;
  background-color: pink;
}

.world  {
  background-color:yellow;
}

效果:

數據綁定–知識補充

1.在{{}}中寫字符串

<view class="world {{ viewClassName }}">
  <text>{{ 'hello' }}</text>
</view>

效果(hello不是變量)：

2.計算變量

<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>

3.{{}} 可以解決語法解析 true /fasle 出現bug的問題

舉例說明:

<!--index.wxml-->
<!-- 框架最大的特點，就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
  1.數據在哪 (當前頁面對象的data 屬性中）
  2.綁定到哪裏去（想綁定到哪就在哪裏用mustche語法輸出）
 -->
<view class="container">
<!-- 這種{{}}的語法叫做小鬍子語法 -->
<text>{{message}}</text>
<text>{{person.name}}</text>

<!-- mustache 語法可以用在:
1. innerHTML（類似）
2. 元素的屬性上
   不能用在標籤名和屬性名上
-->
<view class="world {{ viewClassName }}"></view>

<!-- 可以使用字面量和簡單的邏輯運算符 -->
<text>{{ 'hello' }}</text>
<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>
<text>{{ 100 > 50 ? '你對了' : '你錯了'}}</text>
<!-- 
當語法解析誤解了 true/ false
可以使用{{}} 解決
-->
<checkbox checked="{{ false }}">

</checkbox>

</view>

不加{{}}就會出現問題

<checkbox checked="false">

</checkbox>

居然選中了！！

解決方式就是： false外面包一層 {{}}

列表渲染

1: 明確頁面結構的循環體

2：刪除多餘的重複內容，只保留一個

3：在剩下的這個價格wx:for屬性，屬性值等於要遍歷的數據源，數據源是數組

4：在這個標籤(循環體)內部使用item代表當前被遍歷的元素

給被遍歷的對象定義名稱 wx:for-item

給遍歷的下標(索引) 定義名稱 wx:for-index

代碼演示:

<!--index.wxml-->
<!-- 框架最大的特點，就是讓我們開發者必須按照特定的方式編寫代碼 -->
<!--
  1.數據在哪 (當前頁面對象的data 屬性中）
  2.綁定到哪裏去（想綁定到哪就在哪裏用mustche語法輸出）
 -->
<view class="container">
<!-- 這種{{}}的語法叫做小鬍子語法 -->
<text>{{message}}</text>
<text>{{person.name}}</text>

<!-- mustache 語法可以用在:
1. innerHTML（類似）
2. 元素的屬性上
   不能用在標籤名和屬性名上
-->
<view class="world {{ viewClassName }}"></view>

<!-- 可以使用字面量和簡單的邏輯運算符 -->
<text>{{ 'hello' }}</text>
<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>
<text>{{ 100 > 50 ? '你對了' : '你錯了'}}</text>
<!-- 
當語法解析誤解了 true/ false
可以使用{{}} 解決
-->
<checkbox checked="false">
</checkbox>

<!-- 列表數據渲染 -->
<!-- <view>
    <view>
      <checkbox></checkbox>
      <text>JavaScript</text>
    </view>
    <view>
      <checkbox checked="{{true}}"></checkbox>
      <text>HTML</text>
    </view>
    <view>
      <checkbox></checkbox>
      <text>CSS</text>
    </view>
</view> -->

    <view wx:for="{{ todos }}" >
      <checkbox checked="{{item.completed}}"></checkbox>
      <text>{{item.name}}</text>    
    </view>  
  如果全局屬性中有item這種關鍵詞，可以使用wxlfor-item去給當前遍歷數據起別名
    <view wx:for="{{ todos }}" wx:for-item="aaa">
      <checkbox checked="{{aaa.completed}}"></checkbox>
      <text>{{aaa.name}}</text>
    </view>
    

拿序號
    <view wx:for="{{ todos }}" wx:for-item="aaa" >
      <checkbox checked="{{aaa.completed}}"></checkbox>
      {{index}}
      <text>{{aaa.name}}</text>
    </view>    

拿序號並起別名
    <view wx:for="{{ todos }}" wx:for-item="aaa"  wx:for-index="i" >
      <checkbox checked="{{aaa.completed}}"></checkbox>
      {{i}}
      <text>{{aaa.name}}</text>
    </view>    

打印九九乘法表
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
  <!-- wx:if 是用來根據一個bool值決定顯示或隱藏 -->
      <view wx:if="{{i <= j}}">
          {{i}} * {{j}} = {{i * j}}
      </view>
  </view>
</view> 

<!-- 
1: 明確頁面結構的循環體
2：刪除多餘的重複內容，只保留一個
3：在剩下的這個價格wx:for屬性，屬性值等於要遍歷的數據源，數據源是數組
4：在這個標籤(循環體)內部使用item代表當前被遍歷的元素
給被遍歷的對象定義名稱 wx:for-item
給遍歷的下標(索引) 定義名稱 wx:for-index
 -->


</view>

顯示效果如下:

完

微信小程序學習筆記(1) -- 基礎知識入門

文章目錄