！打好最基礎(chǔ)的部分，為后期的項(xiàng)目做好準(zhǔn)備

** 學(xué)習(xí)注冊(cè)App函數(shù)和Page函數(shù)

** 認(rèn)識(shí)一些常見組件，其余組件使用時(shí)查找文檔

** 對(duì)于wxss和css，兩種區(qū)分好

?

App函數(shù)、Page函數(shù)

1.?每個(gè)小程序都需要在app.js中調(diào)用該函數(shù)注冊(cè)小程序?qū)嵗?/p>

• 注冊(cè)時(shí)，可以綁定對(duì)應(yīng)生命周期函數(shù)，執(zhí)行對(duì)應(yīng)代碼
• 可以做些什么事呢？

小程序進(jìn)入場(chǎng)景

有很多種方式，可在app.js中調(diào)用 onshow 函數(shù) 控制臺(tái)查看

App({
onShow(option) {
    // 可以用來(lái)判斷小程序的進(jìn)入場(chǎng)景 scene對(duì)應(yīng)進(jìn)入方式 可在文檔查看
    console.log(option);
  }
})

• onLunch 函數(shù)也可以查看
• 1001的應(yīng)用場(chǎng)景偏多

共享數(shù)據(jù)

• 在app.js文件中的globalData中定義數(shù)據(jù)，可共享

能夠?qū)崿F(xiàn)什么功能

頁(yè)面跳轉(zhuǎn)

1.?整理了案例：

• 在首頁(yè)點(diǎn)擊按鈕跳轉(zhuǎn)到相應(yīng)案例頁(yè)面

• 可以用循環(huán)的方式綁定，提高寫代碼效率
• data- 的功能（目前知道的）

item 是自己命名的，可在控制臺(tái)中的target中找dataset，里面有相應(yīng)的{{}}值

用來(lái)鑒別哪個(gè)按鈕觸發(fā)事件

• 值得注意的是：

路徑中不能出現(xiàn)中文名，否則報(bào)錯(cuò)

注冊(cè)頁(yè)面-Page函數(shù)

Page({})

1.作用一：在生命周期函數(shù)中發(fā)送網(wǎng)絡(luò)請(qǐng)求，請(qǐng)求數(shù)據(jù)

• 在 onLoad 函數(shù)中，如下案例

• 值得注意的是：

此時(shí)控制臺(tái)會(huì)報(bào)錯(cuò)，因?yàn)橛蛎?，這里先關(guān)掉域名檢測(cè)，后面再具體學(xué)習(xí)

?2.?作用二：初始化一些數(shù)據(jù)，定義本地固定的數(shù)據(jù)

• data中定義，方便被wxml引用展示

1. 監(jiān)聽wxml中的事件，綁定對(duì)應(yīng)事件函數(shù)
2. 生命周期

• 文檔目錄
• 理解起來(lái)其實(shí)還可以，就是對(duì)應(yīng)打開頁(yè)面時(shí)執(zhí)行的生命周期函數(shù)

常見內(nèi)置組件

<view></view>

<text></text>

• 行內(nèi)元素
• 注意：屬性類型是布爾型的話直接加進(jìn)去的寫法即可設(shè)置為true，如下

<button></button>

• 塊級(jí)元素

1.?一些基本使用，在文檔中查對(duì)應(yīng)屬性?

<button>按鈕</button>
<button size="mini" type="primary">type屬性</button>
<button size="mini" type="warn">type屬性</button>
<button size="mini" class="mycolor">自定義屬性</button>
<button size="mini" disabled>禁用屬性</button>
<button size="mini" plain>plain屬性</button>
<button size="mini" hover-class="active">hover效果</button>
<button size="mini" loading>loading屬性</button>

2.?open-type屬性?

• 以前的做法，但是現(xiàn)在不支持通過(guò)該方法獲得用戶信息，獲取的是默認(rèn)的頭像和“微信用戶”

<button size="mini" open-type="getUserInfo" bindgetuserinfo="getUserInfo1">用戶信息1</button>
// 電話號(hào)碼個(gè)人開發(fā)無(wú)法獲取，企業(yè)開發(fā)可以，但是想要與后臺(tái)配合
<button size="mini" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">電話號(hào)碼</button>

<button size="mini" bindtap="getUserInfo">用戶信息2</button>
getUserInfo() {
    // 調(diào)用API，獲取用戶信息
    wx.getUserProfile({
      desc: 'desc', // 必須傳的參數(shù)
      // 早期小程序的api基本不支持Promise
      // 這里支持promise風(fēng)格了 避免產(chǎn)生回調(diào)地獄
      // success: (res) => {
      //   console.log(res);
      // }
    }).then(res => {
      console.log(res);
    })    
  },
}

• 更新后發(fā)布的獲取方法，不需要open-type屬性
• 調(diào)用API

desc：必需的屬性

res：有對(duì)應(yīng)的用戶頭像和昵稱

• 值得注意的是，這里更改為api請(qǐng)求用戶信息，支持返回Promise對(duì)象

<image></images>

• 比較重要的屬性：mode
• 可以在自己嘗試一下mode的多種屬性，體驗(yàn)一下照片不同的放置方法

<image src="/assets/tarbar/image10.jpg"></image>
<image src="/assets/tarbar/image10.jpg" mode="aspectFit"></image>
<!-- 實(shí)現(xiàn)：選擇本地圖片，并展示出來(lái) -->
<button bindtap="onChooseLocalImage" class="mycolor">選擇本地圖片</button>
<image src="{{chooseImg}}" mode="widthFix"></image>
onChooseLocalImage() {
    wx.chooseMedia({
      mediaType:["image"],
    }).then(res => {
      console.log(res);
      this.setData({
        chooseImg:res.tempFiles[0].tempFilePath  // 展示照片 記得調(diào)用該函數(shù)
      })
    })
  }

• 注意：選擇完照片后返回的結(jié)果是將鏈接放入數(shù)組，即可選擇多張照片，參照文檔

<scroll-view></scroll-view>

• 兩個(gè)方向的滾動(dòng)，查看文檔
• 注意：要使用flex布局，這里得先設(shè)置屬性enable-flex，注意下面的item要設(shè)置flex-shrink: 0; 使得盒子不被壓縮

<input>

• 新增屬性，可對(duì)數(shù)據(jù)進(jìn)行雙向綁定
• 注意這里的value必須寫

<input type="text" model:value="{{message}}" class="inp"/>

組件共同屬性

wxss

app.wxss

• 全局樣式

111.wxss (111為文件的名稱)

• 頁(yè)面中的樣式

style=""

• 行內(nèi)樣式

1.?優(yōu)先級(jí)：行內(nèi)>頁(yè)面>全局?

2.?支持的選擇器以及權(quán)重 可在文檔查找

擴(kuò)展-尺寸單位

開發(fā)微信小程序可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)

1.?rpx

• 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕為750rpx
• 如在iphone6，屏幕寬度為375px，有750個(gè)物理像素，即 1rpx=0.5px=1物理像素

2.?在wxss中設(shè)置樣式時(shí)，使用rpx單位，原本的 px數(shù)值 * 2，單位寫為 rpx?

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-501291.html

到了這里，關(guān)于從零開始 | 原生微信小程序開發(fā)（二）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！