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

文章目錄

微信小程式
一、簡單了解

1.常用api
2.常用ui位址

二、微信小程式應用配置

app.json界面外觀

pages
window
debug:

app.js:
wxss

頁面結構

page.json

标簽欄

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

邏輯層的JavaScript

示範: getApp
示範 getCurrentPages()
示範符合commonjs規範
示範 wx對象

界面層（資料綁定）

資料綁定--元素上綁定
資料綁定--屬性上綁定資料
資料綁定--知識補充

1.在{{}}中寫字元串
2.計算變量
3.{{}} 可以解決文法解析 true /fasle 出現bug的問題

清單渲染

微信小程式

一、簡單了解

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>

顯示效果如下: