微信小程序 基本介紹及組件

創建項目

 

 

微信開發工具深入介紹

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

 

 

 

基本項目目錄

 

 

 

1. 配置介紹

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和 頁面自己的 page.json

注意：配置文件中不能出現注釋

1.1. 全局配置app.json

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。普通快速啟動項目里邊的 app.json 配置

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

 

字段的含義

1. pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。

2. window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。

3. 完整的配置信息請參考 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

 

page.json

這里的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。

開發者可以獨立定義每個頁面的一些屬性，如頂部顏色、是否允許下拉刷新等等。

頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

 

視圖層

WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。

數據綁定

　　普通寫法

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

 

組件屬性

簡直和上面沒區別啊

<view id="item-{{id}}"> </view>

 

Page({
  data: {
    id: 0
  }
})

 

bool類型

不要直接寫 checked="false"，其計算結果是一個字符串

<checkbox checked="{{false}}"> </checkbox>

 

運算

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

 

算數運算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

 

邏輯判斷

<view wx:if="{{length > 5}}"> </view>

字符串運算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

 

 

注意 花括號和引號之間如果有空格，將最終被解析成為字符串

 

列表渲染

wx:for

項的變量名默認為 item wx:for-item 可以指定數組當前元素的變量名

下標變量名默認為 index wx:for-index 可以指定數組當前下標的變量名  index是索引

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

 

 

渲染一個包含多節點的結構塊 block最終不會變成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

 

<view wx:for="{{array}}" wx:for-item="val" wx:for-index="key" wx:key="jiakuai">
  <view>{{index +"索引 val是值" + key}}: {{val.message}}</view>
    <view>{{index +"索引" + key}}: {{val.id}}</view>
</view>

    array:[{
      "id": 1,"message":"jllklk"},{ "id":2,
      "message":"klj"}]

wx:key

提高效率使用的

 

事件

<button bindtap="click">按鈕</button>
<button bindlongtap="longclick">長按按鈕</button>

 

 // click:function(e){
  //   console.log('lllll')
  //   console.log(e)
  // },
  // longclick:function(){
  //   console.log('長按時間')
  //   // timeStamp: 4798  進入頁面知道點擊所經歷的時間
  // },

 

 

傳值按鈕

<button bindtap="clic" data-val="這是值" data-key="周四">傳值按鈕</button>

 

clic: function (e) {

    console.log(e.target.dataset)
  },

 

 

 

條件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

<view wx:if="{{condition}}"> True </view>

 

hidden

<view hidden="{{condition}}"> True </view>

 

類似 wx:if

頻繁切換 用 hidden

不常使用 用 wx:if

 

wxss樣式文件

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。

與 CSS 相比，WXSS 擴展的特性有：

• 尺寸單位

• 樣式導入

尺寸單位

rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議： 開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標准。

注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時盡量避免這種情況。

 

樣式導入

 使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}

 

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

 

<view id="yy" class="oo">將老空間來記錄</view>

 

#yy{
  width: 100rpx;
  height: 80rpx;
  background-color: red
}
.oo{
   width: 100rpx;
  height: 800rpx;
  background-color: yellow
}

 

 

內聯樣式

框架組件上支持使用 style、class 屬性來控制組件的樣式。

• style：靜態的樣式統一寫到 class 中。style 接收動態的樣式，在運行時會進行解析，請盡量避免將靜態的樣式寫進 style 中，以免影響渲染速度。

<view style="color:{{color}};" />

• class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

  <view class="normal_view" />

   

 

選擇器

 

全局樣式與局部樣式

 定義在 app.wxss 中的樣式為全局樣式，作用於每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

 

基本組件

小程序提供了常用的標簽組件用於構建頁面

view   類似 div

代碼

<view hover-class="h-class">
  點擊我試試
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

 

 

text

 顯示普通的文本 text只能嵌套text

 

代碼

 <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

 

 

image

 圖片標簽，image組件默認寬度320px、高度240px

 注意：該標簽 其實是 web中的 圖片標簽 和 背景圖片的結合！！！ 並且不支持以前的web中的背景圖片的寫法！！！

 

mode 有效值

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

swiper

微信內置有輪播圖組件

默認寬度 100% 高度 150px

swiper

滑塊視圖容器。

swiper-item

滑塊

默認寬度和高度都是100%

 

video

視頻。該組件是原生組件，使用時請注意相關限制

<video src="{{src}}" controls></video>

 

 

 

自定義組件

小程序允許我們使用自定義組件的方式來構建頁面。

自定義組件  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

創建自定義組件

類似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成

聲明組件

首先需要在 json 文件中進行自定義組件聲明

{
  "component": true
}

 

<view>{{title}}{{name}}</view>
<!-- 組件自定義變量寫在my-com.js中組件的屬性列表中 -->
<view bindtap="click">自定義組件的點擊事件</view>   
<!-- 事件不能直接寫在。js里面 yao寫在js里面的method里面 -->

 

 

 

 

編輯組件

 同時，還要在 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式

 注意：在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器

 

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

 

/* 這里的樣式只應用於這個自定義組件 */
.inner {
  color: red;
}

 

注冊組件

在自定義組件的 js 文件中，需要使用 Component() 來注冊組件，並提供組件的屬性定義、內部數據和自定義方法

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這里是一個自定義方法
    customMethod: function(){}
  }
})

 

使用自定義組件

首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑

{
    // 引用聲明
  "usingComponents": {
      // 要使用的組件的名稱     // 組件的路徑
    "component-tag-name": "path/to/the/custom/component"
  }
}

 

頁面向自定義組件傳遞數據

#頁面中wxml
<my-con  title="{{變量名}}"><my-con/>

 #再組件中
   properties: {
    title:{
      type:String,
      value:"你好"
    }
  }

組件向頁面傳值（組件視圖）

<view>{{title}}{{name}}</view>
<!-- 組件自定義變量寫在my-com.js中組件的屬性列表中 -->
<view bindtap="click">自定義組件的點擊事件</view>   
<!-- 事件不能直接寫在。js里面 yao寫在js里面的method里面 -->

 

主要看data

頁面中

<my-com title="555"></my-com>

 

踩的坑

<!-- 自定義組件中的變量隨時變換在導入的地方 直接寫title=變量 -->
<my-com title="{{ll}}"></my-com>
<!-- 在自定義組件中自定義一個變量 在引用的地方可以直接傳送過來 -->
<!-- 如果自定義組件的變量注釋掉就不會顯示了在飲用的地方 -->

 

組件將事件傳給頁面

 頁面
 <my-com title="{{title}}" bind:icre="icre"></my-com>

頁面中js
  icre:function(e){
    console.log(e)
    this.setData({
        num:this.data.num+1
    })
  },

組件中的wxml

<button bindtap='clickpush'>加我</button>

 

組件中的js

clickpush:function(e){
      console.log(e)
      this.triggerEvent("icre",{"index":13},{})
    }

 

示例二

組件頁面

<view bindtap="click">自定義組件的點擊事件</view>   
<!-- 事件不能直接寫在。js里面 yao寫在js里面的method里面 -->

 

組件。js文件

 /**
   * 組件的方法列表
   */
  methods: {
    click:function(){
      console.log('lljljl')
      this.triggerEvent("icre", {"a":123}, {})
      // 自定義組件觸發事件時 需要使用這個方法 指定事件名 detail對象和時間選項
      // ice是個事件 第二個是傳參數
    } 
  }
})

 

 

使用組件的頁面中

<text>{{sum}}</text>  
<!-- sum初始值為零 -->
<my-com title="{{ll}}" bind:icre="click"></my-com>
<!-- 綁定事件是bind不要加tap -->

 

 

使用組件頁面的js文件中

click:function(e){
    // console.log("****")
    console.log(e.detail.a)
    var _this = this
    var sum = this.data.sum
    _this.setData({
      sum: sum+1
    })
  }
  // 沒接收e之前 可以點擊sum參數增加
  // 自定義綁定組件傳值在拋出頁面那個方法第二個參數里傳值，獲取從e.datail中獲取注意是一個對象需要繼續點擊key

 

使用組件頁面的js文件中

data:{
ll:"隨時變話的自定義組件的值",
      sum:0
}