大家好,，我進(jìn)階學(xué)習(xí)者,。

前言

小程序想必大家應(yīng)該都不陌生了吧，今天小編帶大家一起來(lái)學(xué)習(xí)下微信小程序的開(kāi)發(fā)過(guò)程吧,。

一,、申請(qǐng)微信公眾號(hào)下載微信開(kāi)發(fā)者工具

這個(gè)不一一介紹，網(wǎng)上有教程,，申請(qǐng)成功后打開(kāi)后臺(tái),，我們找到小程序，下載微信開(kāi)發(fā)者工具,，如圖：

這里我們選擇普通小程序開(kāi)發(fā)工具,，點(diǎn)擊微信開(kāi)發(fā)者工具，如圖：

然后選擇相應(yīng)版本的工具,，我們選擇穩(wěn)定版,，如圖：

大概100多兆，不到十秒即可下載完畢,。下載好后按照要求安裝微信開(kāi)發(fā)者工具,。

二,、新建小程序項(xiàng)目

第一次啟動(dòng)會(huì)出現(xiàn)一個(gè)二維碼，我們需要掃描來(lái)登錄,，登錄上了之后即可進(jìn)行開(kāi)發(fā)了,，如圖：

首先我們?cè)谛〕绦蛑羞x中AppID，如圖：

然后我們新建一個(gè)項(xiàng)目,，對(duì)項(xiàng)目的參數(shù)進(jìn)行設(shè)置,，如圖：

設(shè)置好后點(diǎn)擊新建，即可打開(kāi)微信開(kāi)發(fā)者工具,，如圖：

可以看到，這跟我們的瀏覽器有很多相似之處,。我們點(diǎn)擊頭像之后就會(huì)顯示登陸的時(shí)間,，其實(shí)這就是啟動(dòng)小程序的日志時(shí)間，如圖：

三,、小程序的結(jié)構(gòu)

我們先來(lái)看看小程序的文件結(jié)構(gòu)圖,，如下：

可以看出就只有js ，json ,，wxml ,，wxss這四種后綴的文件，前面的index文件夾是首頁(yè),，index.js(邏輯),，index.wxss(樣式)，index.wxml(結(jié)構(gòu)),；logs文件夾是登陸日志,，他的幾個(gè)文件的用法和index的差不多；app.js(邏輯),，app.json(配置),，app.wxss(樣式)這三個(gè)是小程序的配置文件，通過(guò)他們來(lái)渲染頁(yè)面,，并啟動(dòng)小程序,；util.js(邏輯)使用這個(gè)文件來(lái)加載腳本，使用require引入,，最后一個(gè)project.config.json是建立項(xiàng)目時(shí)的配置文件,。

四、小程序的項(xiàng)目開(kāi)發(fā)分工

小程序可以由多人協(xié)同開(kāi)發(fā),，我們可以添加多個(gè)微信好友,，如圖：

可以綁定15個(gè)微信號(hào)。還可以添加體驗(yàn)成員,，也就是用于測(cè)試小程序功能的微信好友,，如圖：

也是可以添加15個(gè),。

五、小程序初探

1.設(shè)置小程序的頁(yè)面

現(xiàn)在我們來(lái)試著寫一個(gè)自己的小程序,，我們都知道創(chuàng)建小程序時(shí)有一個(gè)配置文件,，我們來(lái)看下：

然后我們可以修改小程序的標(biāo)題名，如圖：

修改窗口標(biāo)題名Weinxin為其他的文本即可,。還可以在第一個(gè)字典中設(shè)置主頁(yè)的頁(yè)面地址和主頁(yè)的日志,。這個(gè)時(shí)候我們可以把重新設(shè)置一個(gè)頁(yè)面來(lái)達(dá)到我們?cè)O(shè)置的微信小程序的界面效果，首先我們?cè)O(shè)置一個(gè)微信小程序的頁(yè)面文件夾,，如圖：

我們按照?qǐng)D中的操作步驟來(lái)進(jìn)行操作,，然后按下Ctrl+S保存即可；然后我們?cè)赿emo文件夾的demo.wxml文件中添加前端頁(yè)面代碼,，這個(gè)文件相當(dāng)于Html文件,，另一個(gè)demo.wxss相當(dāng)于css，我們需要通過(guò)添加小程序的組件來(lái)進(jìn)行小程序的內(nèi)容的編寫,，如圖：

這里是所有的微信小程序標(biāo)簽,。我們來(lái)進(jìn)行簡(jiǎn)單的小程序界面編寫，下面來(lái)看下小編寫的,，如圖：

那么這個(gè)是如何完成的了,？

2.完成小程序頁(yè)面的代碼

我們需要將剛剛的demo文件夾和初始的index文件在app.json中的位置進(jìn)行調(diào)換，如圖：

把demo放在index前面即可,，然后我們編寫index的頁(yè)面代碼和樣式,，如圖：

demo.wxml

demo.wxss

可以看到我們?cè)谳斎肟蛑休斎肓讼嚓P(guān)內(nèi)容，一個(gè)非常簡(jiǎn)單的表單就制作完成了,。

注：px和rpx可以互相進(jìn)行轉(zhuǎn)換,，px為物理像素，rpx為邏輯像素,。一般設(shè)置rpx不用擔(dān)心兼容問(wèn)題,。

3.選擇器

上面我們使用了一個(gè)樣式表的基礎(chǔ)概念，選擇器,，微信小程序中支持以下幾種選擇器,，如下：

4.數(shù)據(jù)綁定

不過(guò)光制作表單還不行，我們還得處理這個(gè)表單傳遞的數(shù)據(jù),，所以這個(gè)時(shí)候我們就需要編寫Js代碼,，所以得去demo.js文件中編寫代碼，如圖：

在data中添加標(biāo)題,，但是此時(shí)該數(shù)據(jù)還無(wú)法映射到前端頁(yè)面中,，我們需要在頁(yè)面文件中編寫代碼來(lái)接收這個(gè)值，如圖：

這個(gè)就相當(dāng)于我們jinja2模板引擎中的語(yǔ)法，在微信小程序中我們管他叫數(shù)據(jù)綁定,。

5.列表渲染

除此之外了,，還有比如說(shuō)列表渲染，如下：

demo.wxml

demo.js

這樣我們就能傳遞一個(gè)數(shù)組給前端頁(yè)面,，如圖：

如果我們想遍歷這個(gè)數(shù)組,，行不行了？當(dāng)然是可以的,，demo.js內(nèi)容更保持不變,，只需修改demo.wxml的內(nèi)容即可，如圖：

可以看到打印出了這個(gè)結(jié)果,。

6.條件渲染

相比于列表渲染,，不同的是可以進(jìn)行判斷，如下：

demo.wxml

demo.js

這樣就可以得到最終的值為2,，如圖：

如果我們要一次性判斷多個(gè)組件,，則可以使用一個(gè)標(biāo)簽將多個(gè)組件包裝其阿里，如下：

demo.wxml

即可看到會(huì)返回第二個(gè)條件的值,。

7.模板

wxml中的模板可以在不同地方調(diào)用使用標(biāo)簽'<template/>’來(lái)進(jìn)行定義，首先建立一個(gè)模板,，如下：

<template name="staffName">  <view>    FirstName: {{firstName}}, LastName: {{lastName}}  </view></template>

然后使用 is 屬性,，聲明需要的使用的模板，如下：

<template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>

然后將模板所需要的 data 傳入,，在demo.js的data字典中添加幾個(gè)鍵值對(duì),，如下：

staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}

現(xiàn)在我們就可以在屏幕上看到這些模板中的實(shí)例了，如圖：

8.引用

wxml提供兩種文件的引用方式,，import和include,，下面來(lái)具體看看。

1).import

該引用方式只能使用導(dǎo)入的文件,，對(duì)于下一級(jí)的導(dǎo)入則無(wú)法調(diào)用,，比如c導(dǎo)入b,b導(dǎo)入a,c無(wú)法調(diào)用a,我們來(lái)看下，如圖：

要想生效必須將文件放在同一目錄下,，然后我們來(lái)看下效果,，如圖：

2).include

可以將目標(biāo)文件除了 <template/> <wxs/> 外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置,，如下：

這樣我們即可將網(wǎng)頁(yè)文件中的內(nèi)容通通導(dǎo)入到另一個(gè)頁(yè)面中去,，如圖：

3).樣式的導(dǎo)入

如果我們想共用一個(gè)樣式文件中的樣式，則可以使用import,，首先我們新建一個(gè)樣式文件,，然后寫入代碼，如圖：

然后導(dǎo)入到指定的wxss文件中去，如圖：

最后我們就可以看到背景顏色變了,，如圖：

如果我們有時(shí)候需要統(tǒng)一樣式的話,，直接設(shè)置全局樣式即可，如圖：

9.小程序的專屬腳本語(yǔ)言

小程序既然有和html和css一樣的東西,，肯定有也有和JavaScript一樣的東西,，他就是weixin script，而且他和JavaScript不一樣,，不過(guò)他可以如同JavaScript一樣可在特定標(biāo)簽中定義腳本語(yǔ)言或者專門寫一個(gè)腳本文件然后引入,。那么現(xiàn)在大家就來(lái)和我一起看看是怎么回事吧。

1).編寫方法

我們可以把腳本文件寫入到<wxs>標(biāo)簽中,，也可以把它寫入到.wxs文件中去,。如下：

1)).直接寫到標(biāo)簽中

直接在wxml文件中定義一個(gè)wxs標(biāo)簽，然后將內(nèi)容寫進(jìn)去,，如下：

<wxs module="index">var bb= function (val) {return val}module.exports = {key:bb}</wxs><view> {{index.key(12)}} </view>

2)).寫到文件中然后導(dǎo)入到wxml中

先創(chuàng)建一個(gè)wxs文件,，內(nèi)容如下：

var bb= function (val) {  return val  }  module.exports = {  key:bb  }  module.exports.msg = "hello";然后再導(dǎo)入并且使用，如下：<wxs src="demo.wxs" module="demo"/><view>{{demo.msg}}</view><view>{{demo.key("world")}}</view>

3)).引用wxs文件

我們可以使用函數(shù)require來(lái)引用wxs模塊,，首先新建一個(gè)wxs文件,，內(nèi)容如下：

var d= require("demo.wxs");console.log(d.msg);console.log(d.key(111))

然后再去wxml文件中引用這個(gè)wxs文件，如下：

<wxs src="gg.wxs" module="gg" />

大家可以看到最終結(jié)果,，如圖：

2).變量

既然是腳本語(yǔ)言當(dāng)然就有變量了,，剛才我們已經(jīng)使用過(guò)了，一般聲明變量是使用var關(guān)鍵字,，當(dāng)然你也可以賦值,，如果不賦值，則為undefined,，也就是空值,。

3).保留關(guān)鍵字

delete  刪除void    typeof  類型判斷null    空指針undefined 沒(méi)有定義NaN      空Infinity 無(wú)窮大var       變量定義if        如果else      否則true      真false     假require   引入wxs文件this      對(duì)象本身function  函數(shù)定義arguments  函數(shù)參數(shù)本身return    返回for       遍歷while     當(dāng)型循環(huán)do        當(dāng)型循環(huán)的結(jié)束標(biāo)識(shí)break     終止continue  跳過(guò)并進(jìn)入下一個(gè)循環(huán)switch    選擇判斷case      判斷的情況default   默認(rèn)

以上的保留關(guān)鍵字的用法和JavaScript中的保留關(guān)鍵字是一樣的。

4).數(shù)據(jù)類型

和JavaScript的是一樣的數(shù)據(jù)類型,，具體用法這里不做講述,，看看數(shù)據(jù)類型，如下:

number ：數(shù)值string ：字符串boolean：布爾值object：對(duì)象function：函數(shù)array : 數(shù)組date：日期regexp：正則

5).其他類庫(kù)

微信小程序也內(nèi)置很多類庫(kù)來(lái)完善小程序的各項(xiàng)功能,，比如,，console，math,，json,date等,，和JavaScript用法一致。

10.配置文件

我們可以通過(guò)更改配置文件來(lái)達(dá)到修改頁(yè)面效果的目的,，一般可分為全局配置,，頁(yè)面配置和sitemap配置,，下面我們來(lái)看看吧.

1).全局配置

他是配置小程序全局屬性的一個(gè)配置文件，擁有眾多的配置項(xiàng),，在app.json文件中設(shè)置才能生效,，如圖：

常見(jiàn)的配置選項(xiàng)見(jiàn)下圖：

下面來(lái)看下有關(guān)實(shí)例,，如下：

 "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "Weixin",    "navigationBarTextStyle":"black"  }

2).頁(yè)面配置

可針對(duì)每個(gè)頁(yè)面進(jìn)行針對(duì)性的配置,，相當(dāng)于頁(yè)面的局部配置，優(yōu)先級(jí)高于全局配置,，一般就是在小程序的json文件中,，配置項(xiàng)如下：

如果我們想添加一個(gè)底部欄,，方法很簡(jiǎn)單，如下：

3).sitemap配置

微信小程序中內(nèi)置了搜索功能,，可以通過(guò)sitemap.json來(lái)配置是否允許被微信索引,，一般里面存放的是一個(gè)嵌套的字典，主要的配置項(xiàng)只有rules一個(gè),，其他的則是rules的值,，rules的內(nèi)容有如下幾種：

其中matching的字段范圍有：

matching 取值說(shuō)明

下面我們來(lái)看一個(gè)配置實(shí)例，如下：

{  "rules":[{    "action": "allow",    "page": "path/to/page",    "params": ["a", "b"],    "matching": "exact"  }, {    "action": "disallow",    "page": "path/to/page"  }]}

• path/to/page?a=1&b=2 => 優(yōu)先索引

• path/to/page => 不被索引

• path/to/page?a=1 => 不被索引

• path/to/page?a=1&b=2&c=3 => 不被索引

• 其他頁(yè)面都會(huì)被索引

注：沒(méi)有 sitemap.json 則默認(rèn)所有頁(yè)面都能被索引

注：{"action": "allow", "page": "*"} 是優(yōu)先級(jí)最低的默認(rèn)規(guī)則,，未顯式指明 "disallow" 的都默認(rèn)被索引,。

11.事件綁定

同JavaScript一樣，微信小程序同樣會(huì)有用戶操作事件,，我們來(lái)看看應(yīng)該如何使用吧,。首先我們需要給組件綁定一個(gè)事件，如下：

這里我們通過(guò)點(diǎn)擊得到了該組件的所有信息,。這里我們剛剛用到的是組件的綁定事件,，其實(shí)還有頁(yè)面的綁定事件，如下：

onPullDownRefresh:function(){  console.log('用戶下拉到底')},onReachBottom:function(){  console.log('用戶上拉到底')},onPageScroll:function(options){  console.log('用戶滾動(dòng)頁(yè)面')  console.log(options.scrollTop)},

當(dāng)然,，微信小程序中也有如JavaScript中的瀏覽器的冒泡或者捕獲問(wèn)題,，這個(gè)需要大家去自行學(xué)習(xí)，說(shuō)明文檔里也很全面,。

六,、總結(jié)

小程序就目前來(lái)說(shuō)市場(chǎng)還是想當(dāng)火爆的，所以學(xué)好它很有必要,。

------------------- End -------------------