最簡(jiǎn)單上手微信小程序

微信小程序的開(kāi)發(fā)跟普通前端網(wǎng)頁(yè)開(kāi)發(fā)很像很像，都有三劍客（html、css、JavaScript），但小程序也有一些它的特點(diǎn)。如果之前有了一些前端的基礎(chǔ)，那小程序上手會(huì)非?？?，如果沒(méi)有，也沒(méi)關(guān)系，下面會(huì)從零開(kāi)始教你搭建一個(gè)簡(jiǎn)單實(shí)用的備忘錄小程序。奔著一個(gè)目標(biāo)結(jié)果去學(xué)習(xí)，才是最高效的學(xué)習(xí)方法。

如果想了解提前了解一下html和css歡迎康康我的文章哦 高效入門(mén)html5 ，高效入門(mén)css3 。

如果想快速體驗(yàn)效果，app.json、wxml、wxss、js 文件的源碼下面已經(jīng)給出，粘貼進(jìn)小程序就可以。

以下所有內(nèi)容基于 小程序官方文檔 和個(gè)人開(kāi)發(fā)經(jīng)驗(yàn)。

第一步、申請(qǐng)一個(gè)小程序賬號(hào)！

小程序賬號(hào)注冊(cè) ，在這個(gè)網(wǎng)頁(yè)注冊(cè)好自己的賬號(hào)后，進(jìn)入 小程序后臺(tái) ，查看并記錄自己的AppID，有了這個(gè)你的小程序才能上線！在這里你可以管理你的小程序的權(quán)限，如查看數(shù)據(jù)報(bào)表，發(fā)布小程序等。

下載并打開(kāi)微信開(kāi)發(fā)者工具

微信開(kāi)發(fā)者工具就是開(kāi)發(fā)小程序的IDE，當(dāng)然也可以用VsCode，看個(gè)人習(xí)慣，新手用開(kāi)發(fā)者工具沒(méi)毛病。 進(jìn)入下面網(wǎng)頁(yè)按電腦配置下載相應(yīng)安裝包就行啦。

開(kāi)發(fā)者工具下載

我們打開(kāi)微信開(kāi)發(fā)者工具

起一個(gè)項(xiàng)目名，選一個(gè)目錄，不使用云服務(wù)，模板選JavaScript-基礎(chǔ)模板，ok！

第二步、小程序基本文件介紹

• app.js：全局入口文件，onLaunch()里放初始化的內(nèi)容。（我們不需要?jiǎng)舆@里）
• app.json：全局配置文件。（里面不能有注釋）（單獨(dú)頁(yè)面的.json文件的配置項(xiàng)會(huì)覆蓋 app.json 中相同的配置項(xiàng)）

三劍客：

• wxml：可以理解為就是微信的html哈哈哈，跟html是一個(gè)邏輯，是整個(gè)小程序的框架文件，比如當(dāng)前頁(yè)面顯示什么內(nèi)容，按什么結(jié)構(gòu)框架去顯示等等。
• wxss：可以理解為就是小程序的css文件，是整個(gè)小程序的樣式文件，就是渲染，讓頁(yè)面看起來(lái)更美觀，比如設(shè)置頁(yè)面的內(nèi)容顏色，字體大小等等。
• js：如果一個(gè)app一打開(kāi)只顯示頁(yè)面而沒(méi)有任何交互功能，跟報(bào)紙沒(méi)有區(qū)別。js文件是開(kāi)發(fā)的核心，與前端的js文件一樣，跑的是JavaScript代碼，是小程序的邏輯文件，負(fù)責(zé)整個(gè)小程序的邏輯功能，比如按一下某個(gè)地方就響應(yīng)上面功能，這些都在js文件里定義。

第三步、頁(yè)面創(chuàng)建

在pages目錄下新建文件夾，命名為demo

demo文件夾下新建頁(yè)，命名也是demo，回車(chē)

直接自動(dòng)生成 js、json、wxml和wxss 四個(gè)基本文件，方便得不行！

有個(gè)更絕的方法，進(jìn)入app.json，在pages里加入一個(gè)頁(yè)面的地址，直接生成改名稱的文件夾并包含四個(gè)基本文件。

將pages/demo/demo往上移到第一位，再按一下編譯，發(fā)現(xiàn)小程序一開(kāi)始進(jìn)入的頁(yè)面就變成了我們新建的demo頁(yè)，因?yàn)槲覀冞€沒(méi)加代碼，所以只顯示了一條默認(rèn)的地址，下面開(kāi)搞！

app.json配置

我們可以看到app.json里面的window代碼如下

把它改為

"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#f60",
"navigationBarTitleText": "第一個(gè)小程序",
"navigationBarTextStyle": "white"

編譯，發(fā)現(xiàn)上方顯示欄變了，#f60是橙色

wxml文件配置

打開(kāi)demo.wxml文件，會(huì)發(fā)現(xiàn)只有一條<text>pages/demo/demo.wxml</text>, 我們會(huì)發(fā)現(xiàn)頁(yè)面中的確也只顯示pages/demo/demo.wxml，試一下改動(dòng)一下<view>…</view> 里面的內(nèi)容，小程序頁(yè)面就會(huì)顯示相應(yīng)內(nèi)容。

實(shí)際上html文件，或wxml文件，由一個(gè)個(gè)標(biāo)簽< ></ >組成，標(biāo)簽之間的就是內(nèi)容，標(biāo)簽決定了整個(gè)頁(yè)面的框架。標(biāo)簽的種類非常多，只能在一步步學(xué)習(xí)中積累。放內(nèi)容的標(biāo)簽可以理解為容器，wxml里分塊狀容器<view> 和條狀容器<text>。

要想使用邏輯，可以直接在標(biāo)簽里加兩個(gè)雙引號(hào)，如<text>{{ 10 + 20 }}</text>，頁(yè)面會(huì)直接算出30.

<text>{{ 10 + 20 }}</text>  <!-- 注釋-->

js文件配置

data: {
    mytext:"hhh",
    datalist:["111","222","333"]
},  /*注釋*/

data中放的就是初始化的數(shù)據(jù)，試一下放上上面的數(shù)據(jù)，在wxml中：
<view>{{ mytext }}</view> , 則 “hhh” 會(huì)被拿到并打印出來(lái)，所以雙括號(hào)里還能放變量。

試一下在wxml跑下面的代碼：

<view wx:for="{{datalist}}"> 
    {{item}}--{{index}}
</view>

結(jié)果如下，它能把data中定義的datalist數(shù)組中所有數(shù)據(jù)打印出（動(dòng)態(tài)數(shù)組遍歷），我們的備忘錄需要用到這個(gè)功能！

wxss文件配置

每個(gè)標(biāo)簽都可以定義一個(gè)class，如

<view class="hello"> hello </view>

這時(shí)這個(gè)hello就可以在css文件里定義樣式！
打開(kāi)wxss，

.hello{
    color:red;                         /*字體紅色*/
	font-size:50px;                    /*字體大小為30像素*/
	background-color:lightblue;        /*背景為天藍(lán)色*/
	text-align:center;                 /*居中顯示*/
    }

發(fā)現(xiàn)hello變成了

也可以直接對(duì)view進(jìn)行定義，這樣所以的view標(biāo)簽都會(huì)被統(tǒng)一定義，class就會(huì)更靈活一點(diǎn)。

view{
    color:red;                         /*字體紅色*/
	font-size:50px;                    /*字體大小為30像素*/
	background-color:lightblue;        /*背景為天藍(lán)色*/
	text-align:center;                 /*居中顯示*/
    }

注意！定義class的樣式需要前面加個(gè)小數(shù)點(diǎn) . ，直接對(duì)標(biāo)簽操作則不需要。

第四步、條件渲染 介紹

其實(shí)不是所有的邏輯都必須在js中定義，簡(jiǎn)單的條件判斷，如 if else， 可以在wxml中定義。

先在js文件的data中加入

isCreated : true

然后在wxml中，加入

<view wx:if="{{isCreated}}">條件渲染if</view>
<view wx:else>條件渲染else</view>

編譯，會(huì)發(fā)現(xiàn) 條件渲染if 被打印出，如果data中把 isCreated 改成 false，則 條件渲染else 被打印出，這就是條件渲染，選擇性地顯示內(nèi)容。

事件 介紹

就是按一下按鍵后觸發(fā)的功能，我們叫為觸發(fā)事件。我們先來(lái)創(chuàng)建一個(gè)按鍵，在wxml使用<button>標(biāo)簽：

<button type="primary" bindtap="handleTap">click</button>

type定義按鍵的大小，primary是正常，mini是迷你。bindtap=“handleTap” 把按鍵綁定到了一個(gè)叫 handleTap 觸發(fā)事件，這個(gè)事件需要到j(luò)s文件定義。

在js中，接著data，新建一個(gè)函數(shù) handleTap

 handleTap(){
        console.log("click")
    },

點(diǎn)一下編譯，按一下按鍵，發(fā)現(xiàn)終端打印出了click！點(diǎn)一下就打印一下，說(shuō)明我們的事件觸發(fā)功能成功！
進(jìn)階一下，如果想要按一下就改變前面定義的mytext和isCreated變量，怎么辦？easy：

 handleTap(){
        console.log("click"),
        this.setData({
            mytext:"xiaoming",
            isCreated:!this.data.isCreated  //取反
        })
    },

需要注意，小程序里改變量的值必須得這么搞，直接mytext：。。。會(huì)報(bào)錯(cuò)。

第五步

我們所需的基礎(chǔ)知識(shí)已經(jīng)介紹完啦，下面正式做備忘錄！

頁(yè)面框架

先把你的wxml代碼刪掉，把下面這段代碼粘貼進(jìn)你的wxml里，編譯，先看看結(jié)果，再解釋

<view class="box">
    <input type="text" bindinput="handleInput" value="{{mytext}}"/>
    <button bindtap="handleAdd">add</button>
</view>

<view wx:if="{{datalist.length>0}}">
    <view wx:for="{{datalist}}" wx:key="index" class="list"> 
        <text>{{item}}</text>
        <button size="mini" bindtap="handleDelete" data-myid="{{index}}">delete</button>
    </view>
</view>

<view wx:else>空空如也</view>

結(jié)果應(yīng)該長(zhǎng)這樣，add按鍵左邊是輸入框，因?yàn)檫€沒(méi)有css定義它的長(zhǎng)度和邊框，所以看不見(jiàn)。從代碼可以看出總共就三個(gè)大的view標(biāo)簽，其實(shí)功能上只有兩個(gè)，下面兩個(gè)組成一個(gè)條件渲染塊。

第一個(gè)view標(biāo)簽里面包了一個(gè)<input> 標(biāo)簽（格式定義為輸入文本，綁定了一個(gè)input的事件，命名為 handleInput，就是輸入框內(nèi)容一旦變化就會(huì)觸發(fā)，最后的value是定義初始化時(shí)輸入框的內(nèi)容）和一個(gè)<button> 標(biāo)簽（綁定了一個(gè)按鍵觸發(fā)事件，命名為 handleAdd）。

下面的一大坨view里面看著很復(fù)雜，其實(shí)easy啦。先條件判斷一下datalist中有無(wú)數(shù)據(jù)，如果有數(shù)據(jù)（有備忘事件），就進(jìn)入里面的view。

我們看到一個(gè)前面介紹過(guò)的 for 循環(huán)遍歷datalist，并把里面每個(gè)數(shù)據(jù)都標(biāo)上key，就是wx:key=“index” 這句代碼，方便之后對(duì)單獨(dú)地?cái)?shù)據(jù)進(jìn)行操作（刪除），當(dāng)然為了在css中定義它的樣式讓它更好看點(diǎn)，給它定義一個(gè)class。

再往里看，就是遍歷出的每個(gè)數(shù)據(jù)，先以text標(biāo)簽裝著數(shù)據(jù)，再在它后面跟上一個(gè)delete按鍵，在按鍵中，綁定了一個(gè)按鍵事件 handleDelete ，data-myid="{{index}} 用于給每個(gè)按鍵都帶上一個(gè)id，跟前面讓數(shù)據(jù)帶上key是一樣的道理，為了區(qū)別出每一個(gè)按鍵。

若datalist里面沒(méi)數(shù)據(jù)，就會(huì)在頁(yè)面顯示“空空如也” 哈哈哈 <view wx:else>空空如也</view> 應(yīng)該很容易理解

頁(yè)面美化

同上，把wxss里面代碼刪掉，將下面的代碼粘貼進(jìn)去。

input{
    border:1px solid black;
    height:50px;
    /*line-height: 50px;*/
    border-radius: 10px;
}

.box{
    display: flex;
    flex-direction: row;
}

.list{
    display: flex;
    flex-direction: row;
}


.list text{
    width: 150px;
}

加了wxss渲染頁(yè)面后，整個(gè)頁(yè)面看起來(lái)就符合標(biāo)準(zhǔn)了。代碼其實(shí)大家看著應(yīng)該就能懂，我再啰嗦幾句。

input標(biāo)簽，border定義它的邊框，厚1px（px是像素的意思，就是1個(gè)像素的厚度），height就是輸入框的高度，border-radius定義了邊框的圓角。

輸入框加add按鍵我們希望它們并排在第一行，所以對(duì)它們整體所定義的box類就可以，flex-direction: row; 就是讓他們排成一行，以flex為單位會(huì)自動(dòng)拉伸，很方便。

對(duì)list類的定義同理啦。

當(dāng)然各位也可以再加上點(diǎn)顏色或調(diào)一下大小。

邏輯設(shè)計(jì)

整個(gè)頁(yè)面有了，下面加入靈魂！JavaScript。

將下面代碼的粘貼進(jìn)去js的Page里，注意，三個(gè)事件函數(shù)跟在data的后面，整體在Page里面，別把Page刪了…

    data: {
        mytext:"",
        datalist:["111","222","333"]
    },

    handleInput(evt){
        //console.log("input",evt.detail.value),
        this.setData({
            mytext:evt.detail.value
        })

    },

    handleAdd(){
        console.log(this.data.mytext),
        this.setData({
            datalist:[...this.data.datalist,this.data.mytext],
            mytext:""
        })
    },

    handleDelete(evt){
        console.log("delete",evt.target.dataset.myid),

        this.data.datalist.splice(evt.target.dataset.myid, 1)
        this.setData({
            datalist:this.data.datalist
        })    
    },

編譯一下康康，整個(gè)備忘錄搞定啦！將備忘事件輸入輸入框，按add，事件會(huì)被添加進(jìn)入，然后按delete會(huì)刪除對(duì)應(yīng)的事件。

handleInput函數(shù)：定義為只要輸入框內(nèi)容變化，就把當(dāng)時(shí)的值存進(jìn)mytext變量，所以一頓操作后，mytext存儲(chǔ)最后確定的備忘事件，然后等著add函數(shù)把它取出來(lái)。（evt是調(diào)用的參數(shù)，可以理解為當(dāng)前頁(yè)面）

handleAdd函數(shù)：先用console.log把mytext的值打印出來(lái)看一看對(duì)不對(duì)，然后我們用到前面介紹的改變量的值方法，setData，將mytext的值（備忘事件）加入datalist數(shù)組里，但人家數(shù)組里面正常還有別的數(shù)據(jù)呀，怎么在后面加進(jìn)去呢？[…this.data.datalist,this.data.mytext]， 前面那三個(gè)點(diǎn)很重要，就是說(shuō)不管datalist前面有多少值，我只在它后面插入一個(gè)mytext，同時(shí)將mytext變量清空，等待下一個(gè)備忘事件輸入。

所以一按下add鍵，datalist就會(huì)多一個(gè)數(shù)據(jù)，所以wxml中循環(huán)遍歷數(shù)組時(shí)就會(huì)多生成一個(gè)view標(biāo)簽和delete按鍵，在頁(yè)面實(shí)時(shí)顯示出來(lái)。（頁(yè)面一直處于刷新?tīng)顟B(tài)，不是按下了按鍵才刷新）

handleDelete函數(shù)：先將按下的delete鍵對(duì)應(yīng)的id打印出來(lái)康康。下面來(lái)個(gè)高端操作，將數(shù)組中對(duì)應(yīng)id的值刪掉，同時(shí)后面的值往前移一位，一行代碼搞定，this.data.datalist.splice(evt.target.dataset.myid, 1)， 再將這個(gè)變化了的datalist保存，ok！

至此，這個(gè)備忘錄講完啦，這是作為小程序入門(mén)比較高效的小項(xiàng)目，如果想快速體驗(yàn)效果，app.json、wxml、wxss、js 文件的源碼上面已經(jīng)給出，粘貼進(jìn)去就可以。

其實(shí)小程序的開(kāi)發(fā)已經(jīng)有很多很多的模板，比如商場(chǎng)、點(diǎn)餐等，改改數(shù)據(jù)就行，官方的開(kāi)放文檔也很全，但還是要多動(dòng)手。

之后可能會(huì)出更多有趣項(xiàng)目的教學(xué)，如果想看其他計(jì)算機(jī)和電子的學(xué)習(xí)內(nèi)容歡迎來(lái)我主頁(yè)逛逛呀哈哈。