天天看點

微信小程式學習筆記(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​​>

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

pages每個檔案夾就是一個頁面:

2.常用ui位址

​​https://weui.io/#​​

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

二、微信小程式應用配置

根目錄

app.json界面外觀

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

"backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }      
微信小程式學習筆記(1) -- 基礎知識入門
微信小程式學習筆記(1) -- 基礎知識入門
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"
      }
    ]
  },      
微信小程式學習筆記(1) -- 基礎知識入門

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

  • 邏輯層:
微信小程式學習筆記(1) -- 基礎知識入門
  • 界面層
微信小程式學習筆記(1) -- 基礎知識入門

邏輯層的JavaScript

和普通的js的差别:

1:沒有bom和dom

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

2:小程式的js有一些額外的成員

  • App 方法 用于定義應用程式執行個體對象
  • Page方法 用于定義頁面對象
  • getApp 方法 用于擷取全局應用程式對象
  • getCurrentPges 方法 用來擷取目前頁面的調用棧(數組,最後一個是目前頁面)
  • wx對象 用來提供核心Api的:

    專門的頁面介紹:​​https://developers.weixin.qq.com/miniprogram/dev/api/​​//console.log(wx)

  1. 小程式的js是支援commonjs規範的:

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

    //foo.say(‘world’)

示範: getApp

app.js中:

定義個foo方法:

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

index.js中:直接調用:

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

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

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

示範 getCurrentPages()

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

示範符合commonjs規範

在utils下建個foo.js

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

在app.js中調用:

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

看下運作效果:

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

總結就是: 一個export 一個 require

不支援export.xxx;隻支援module.exports

示範 wx對象

在app.js中

console.log(wx)      

效果:

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

界面層(資料綁定)

資料綁定

資料綁定–元素上綁定

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>      

頁面效果:

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

資料綁定–屬性上綁定資料

微信小程式學習筆記(1) -- 基礎知識入門
/**index.wxss**/
.hello{
  width: 100px;
  height: 100px;
  background-color: pink;
}      

看下效果:

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

源碼位址:

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

資料綁定–屬性上綁定資料–拼接資料

微信小程式學習筆記(1) -- 基礎知識入門
注意: world後面有空格。
/**index.wxss**/
.hello{
  width: 100px;
  height: 100px;
  background-color: pink;
}

.world  {
  background-color:yellow;
}      

效果:

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

資料綁定–知識補充

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

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

效果(hello不是變量):

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

2.計算變量

<text>{{ 111 }}</text>
<text>{{ 111 + 999 }}</text>      
微信小程式學習筆記(1) -- 基礎知識入門

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>      
微信小程式學習筆記(1) -- 基礎知識入門

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

<checkbox checked="false">

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

居然選中了!!

解決方式就是: 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>      

顯示效果如下: