? ? ? 前幾天學(xué)習(xí)了react這個(gè)開發(fā)框架，了解了JS語言的基本知識。想到最近3年小程序如火如荼的發(fā)展，進(jìn)而決定入坑學(xué)習(xí)。

微信小程序簡介

? ? ?? 微信小程序是以微信為運(yùn)行環(huán)境的一種應(yīng)用，其實(shí)質(zhì)是 Hybrid 技術(shù)的應(yīng)用，Hybrid App 即混合模式移動應(yīng)用，因此與 H5 類似，但又比 H5 擁有很多原生的能力，例如調(diào)用位置信息和攝像頭等。小程序的開發(fā)方式與 H5 十分相似，用的也是 JavaScript、HTML、CSS 語言。

?

微信小程序開發(fā)入門

1. 申請小程序賬號

? ? ?? 申請小程序賬號需要一個(gè)未申請過公眾號和小程序賬號的郵箱，然后在小程序介紹頁的底部點(diǎn)擊 「前往注冊」 按鈕，前往注冊頁根據(jù)指引填寫信息。

?

填完信息，點(diǎn)擊「注冊」會提示去注冊的郵箱激活賬號，去郵箱激活即可。

2. 安裝開發(fā)者工具

微信開發(fā)者工具可以幫助開發(fā)者簡單和高效地開發(fā)和調(diào)試微信小程序，集成了公眾號網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。它可以實(shí)時(shí)查看頁面和功能效果，還能在開發(fā)者工具中進(jìn)行 Debug。它使用 NW.js (previously known as node-webkit) 編寫，在調(diào)試時(shí)和 Chrome 幾乎無差別，很容易上手。

前往開發(fā)者工具下載頁面 ，根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進(jìn)行安裝。

打開微信開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，確認(rèn)后會進(jìn)入選擇「小程序項(xiàng)目」或「公眾號網(wǎng)友項(xiàng)目」的界面，這里我們選擇「小程序項(xiàng)目」，出現(xiàn)如下界面：

點(diǎn)擊新建，出現(xiàn)一個(gè)示例項(xiàng)目的預(yù)覽，點(diǎn)擊頂部菜單「編譯」就可以在微信開發(fā)者工具中預(yù)覽你的第一個(gè)小程序。

3. 代碼構(gòu)成?

? ? ? ? 我們生成的項(xiàng)目的目錄如下：

├── pages 頁面目錄 | ├── index 首頁 | | ├── index.js 首頁js | | ├── index.wxss 首頁樣式文件 | | └── index.wxml 首頁模板文件 ├── utils 工具函數(shù) | ├── utils.js ├── app.js app入口文件 ├── app.json app配置文件 ├── app.wxss app樣式文件 └── project.config.json 項(xiàng)目配置文件

如上面的目錄，一個(gè)小程序必須要有一個(gè) app.js 入口文件，app.json 配置文件。除此之外，還有一個(gè)叫 project.config.json 的工具配置文件，是方便你在不同的電腦上開發(fā)時(shí)，開發(fā)者工具能擁有相同的設(shè)置。

每個(gè)頁面上，同樣會有 page.json 、page.js 、 page.wxml 、 page.wxss 這四種文件。分別是頁面配置，頁面邏輯，頁面模板和頁面樣式文件。除去頁面配置文件 page.json， 后三者和我們 HTML 、 JavaScript 、 CSS 三劍客十分相像，只不過換了個(gè)后綴而已。

WXML 模板文件里面，提供了數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用等功能。

WXSS 樣式文件和 CSS 別無大異，能支持絕大多數(shù)的 CSS 、 CSS3 的語法。除此之外，還支持樣式引入，單位轉(zhuǎn)換的功能，小程序在 WXSS 上做了一些擴(kuò)充和修改，新增了 rpx 尺寸單位，不需要再人工地使用類似rem的適配方案來適配移動端的各種機(jī)型，給開發(fā)者提供了便利。

4. 代碼分析

1. app.json

這個(gè)文件是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 Tab 等。

{"pages": ["pages/index/index","pages/userConsole/userConsole","pages/storageConsole/storageConsole","pages/databaseGuide/databaseGuide","pages/addFunction/addFunction","pages/deployFunctions/deployFunctions","pages/chooseLib/chooseLib","pages/openapi/openapi","pages/openapi/serverapi/serverapi","pages/openapi/callback/callback","pages/openapi/cloudid/cloudid","pages/im/im","pages/im/room/room"],"window": {"backgroundColor": "#F6F6F6","backgroundTextStyle": "light","navigationBarBackgroundColor": "#F6F6F6","navigationBarTitleText": "云開發(fā) QuickStart","navigationBarTextStyle": "black"},"sitemapLocation": "sitemap.json","style": "v2" }

?所有的頁面都需要在app.json的pages里面增加入口，這樣才能讓頁面被加載

?

?2. index.js

//index.js const app = getApp()Page({data: {avatarUrl: './user-unlogin.png',userInfo: {},logged: false,takeSession: false,requestResult: ''},onLoad: function() {if (!wx.cloud) {wx.redirectTo({url: '../chooseLib/chooseLib',})return}// 獲取用戶信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框wx.getUserInfo({success: res => {this.setData({avatarUrl: res.userInfo.avatarUrl,userInfo: res.userInfo})}})}}})},onGetUserInfo: function(e) {if (!this.data.logged && e.detail.userInfo) {this.setData({logged: true,avatarUrl: e.detail.userInfo.avatarUrl,userInfo: e.detail.userInfo})}},onGetOpenid: function() {// 調(diào)用云函數(shù)wx.cloud.callFunction({name: 'login',data: {},success: res => {console.log('[云函數(shù)] [login] user openid: ', res.result.openid)app.globalData.openid = res.result.openidwx.navigateTo({url: '../userConsole/userConsole',})},fail: err => {console.error('[云函數(shù)] [login] 調(diào)用失敗', err)wx.navigateTo({url: '../deployFunctions/deployFunctions',})}})},// 上傳圖片doUpload: function () {// 選擇圖片wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {wx.showLoading({title: '上傳中',})const filePath = res.tempFilePaths[0]// 上傳圖片const cloudPath = 'my-image' + filePath.match(/\.[^.]+?$/)[0]wx.cloud.uploadFile({cloudPath,filePath,success: res => {console.log('[上傳文件] 成功：', res)app.globalData.fileID = res.fileIDapp.globalData.cloudPath = cloudPathapp.globalData.imagePath = filePathwx.navigateTo({url: '../storageConsole/storageConsole'})},fail: e => {console.error('[上傳文件] 失敗：', e)wx.showToast({icon: 'none',title: '上傳失敗',})},complete: () => {wx.hideLoading()}})},fail: e => {console.error(e)}})},})

可以見到，頁面中有一個(gè) Page 包裹著一個(gè)對象，頁面的 data、一些生命周期、一些方法，都掛載在該對象上。而小程序正是通過這樣的方式進(jìn)行初始化的。 也就是說，當(dāng)我們初始化的時(shí)候，要將初始狀態(tài)寫在這個(gè)文件中。

?3.?index.wxml

<!--index.wxml--> <view class="container"><!-- 用戶 openid --><view class="userinfo"><button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"class="userinfo-avatar"style="background-image: url({{avatarUrl}})"size="default"></button><view class="userinfo-nickname-wrapper"><button class="userinfo-nickname" bindtap="onGetOpenid">點(diǎn)擊獲取 openid</button></view></view><!-- 上傳圖片 --><view class="uploader"><view class="uploader-text" bindtap="doUpload"><text>上傳圖片</text></view><view class="uploader-container" wx:if="{{imgUrl}}"><image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image></view></view><!-- 操作數(shù)據(jù)庫 --><view class="uploader"><navigator url="../databaseGuide/databaseGuide" open-type="navigate" class="uploader-text"><text>前端操作數(shù)據(jù)庫</text></navigator></view><!-- 即時(shí)通信 --><view class="uploader"><navigator url="../im/im" open-type="navigate" class="uploader-text"><text>即時(shí)通信 Demo</text></navigator></view><!-- 新建云函數(shù) --><view class="uploader"><navigator url="../addFunction/addFunction" open-type="navigate" class="uploader-text"><text>快速新建云函數(shù)</text></navigator></view><!-- 云調(diào)用 --><view class="uploader"><navigator url="../openapi/openapi" open-type="navigate" class="uploader-text"><text>云調(diào)用</text></navigator></view></view>

?作為一名移動端開發(fā)出生的工程師，這個(gè)就很熟悉了，本質(zhì)就是頁面的布局渲染。WXML 模板中，渲染了一些在 index.js 里定義的頁面變量，綁定了多個(gè)事件。

4. index.wxss

? ? ?? 這個(gè)是微信獨(dú)有的一個(gè)文件，個(gè)人理解為style，規(guī)定一些空間的大小，顏色，風(fēng)格等標(biāo)準(zhǔn)。值得一提的是微信小程序封裝了一個(gè)新單位rpx！改單位可以適配自動適配多個(gè)機(jī)型，作為移動端開發(fā)出身的我，曾經(jīng)被適配機(jī)型整的無語，給滿分！

/**index.wxss**/page {background: #f6f6f6;display: flex;flex-direction: column;justify-content: flex-start; }.userinfo, .uploader, .tunnel {margin-top: 40rpx;height: 140rpx;width: 100%;background: #fff;border: 1px solid rgba(0, 0, 0, 0.1);border-left: none;border-right: none;display: flex;flex-direction: row;align-items: center;transition: all 300ms ease; }.userinfo {padding-left: 120rpx; }.userinfo-avatar {width: 100rpx;height: 100rpx;margin: 20rpx;border-radius: 50%;background-size: cover;background-color: white; }.userinfo-avatar[size] {width: 100rpx; }.userinfo-avatar:after {border: none; }.userinfo-nickname {font-size: 32rpx;color: #007aff;background-color: white;background-size: cover;text-align: left;padding-left: 0;margin-left: 10px; }.userinfo-nickname::after {border: none; }.userinfo-nickname-wrapper {flex: 1; }.uploader, .tunnel {height: auto;padding: 0 0 0 40rpx;flex-direction: column;align-items: flex-start;box-sizing: border-box; }.uploader-text, .tunnel-text {width: 100%;line-height: 52px;font-size: 34rpx;color: #007aff; }.uploader-container {width: 100%;height: 400rpx;padding: 20rpx 20rpx 20rpx 0;display: flex;align-content: center;justify-content: center;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1); }.uploader-image {width: 100%;height: 360rpx; }.tunnel {padding: 0 0 0 40rpx; }.tunnel-text {position: relative;color: #222;display: flex;flex-direction: row;align-content: center;justify-content: space-between;box-sizing: border-box;border-top: 1px solid rgba(0, 0, 0, 0.1); }.tunnel-text:first-child {border-top: none; }.tunnel-switch {position: absolute;right: 20rpx;top: -2rpx; }.disable {color: #888; }.service {position: fixed;right: 40rpx;bottom: 40rpx;width: 140rpx;height: 140rpx;border-radius: 50%;background: linear-gradient(#007aff, #0063ce);box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);display: flex;align-content: center;justify-content: center;transition: all 300ms ease; }.service-button {position: absolute;top: 40rpx; }.service:active {box-shadow: none; }.request-text {padding: 20rpx 0;font-size: 24rpx;line-height: 36rpx;word-break: break-all; }

我的第一個(gè)小程序展示

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的全网最详细的微信小程序开发教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。