例子1：注冊(cè)后下載微信小程序的開(kāi)發(fā)工具

常常用HBuilder來(lái)替換內(nèi)容等等

用CTRL+C(顯示為^C)的cmd命令關(guān)掉后臺(tái)代碼（就是把已經(jīng)開(kāi)啟的服務(wù)關(guān)掉），之后可以看到showToast的效果

例子2：使用微信小程序的開(kāi)發(fā)工具來(lái)實(shí)現(xiàn)后端的處理（MySQL連接，訪(fǎng)問(wèn)路徑獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，訪(fǎng)問(wèn)路徑獲取圖片）

例子3：創(chuàng)建微信小程序的項(xiàng)目和界面

在wxml中寫(xiě)html的代碼

下面是通過(guò)官網(wǎng)的API文檔設(shè)置的自定義導(dǎo)航欄

json中注冊(cè)要使用的組件，wxml中調(diào)用組件

index,js中data設(shè)置可以在wxml文件中用{{}}調(diào)用的變量（比如一些圖片路徑等等），就是設(shè)置組件的初始數(shù)據(jù)

:src之類(lèi)的是動(dòng)態(tài)綁定

可以用index.js文件中的setData來(lái)更新組件的狀態(tài)

例子4：封裝ajax等部分的代碼后調(diào)用，進(jìn)而讓自己可以少寫(xiě)些代碼。

可以封裝ajax的代碼后調(diào)用，進(jìn)而讓自己可以少寫(xiě)些代碼

微信小程序中國(guó)的彈出警告框用wx.showToast

常?？梢圆榭次⑿判〕绦虻拈_(kāi)發(fā)文檔https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

在config.js中聲明常用的在別的界面要多次調(diào)用的內(nèi)容，比如url路徑等等，以后要用時(shí)，就可以直接用，要改內(nèi)容的話(huà)在config.js中改一次基本就可以了

在models目錄下寫(xiě)封裝ajax等請(qǐng)求數(shù)據(jù)的代碼（封裝代碼真的非常好用）

常常用回調(diào)函數(shù)來(lái)處理異步代碼，會(huì)很好用，不用callback回調(diào)函數(shù)，有時(shí)data會(huì)返回undefined

知識(shí)點(diǎn)

個(gè)人代碼（例子1到例子4的實(shí)現(xiàn)點(diǎn)贊組件等功能）：

創(chuàng)建微信小程序時(shí)，記得要注冊(cè)，找到自己的AppID(小程序ID)，在使用別人寫(xiě)的小程序項(xiàng)目時(shí)，可以選擇該文件夾后運(yùn)行

直接MySQL中通過(guò)運(yùn)行sql文件創(chuàng)建表和表的數(shù)據(jù)的自己摸索出來(lái)的高效方法

報(bào)Access denied for user'root'@'localhost' (using password: NO)的錯(cuò)原因是你沒(méi)有設(shè)置或設(shè)置對(duì)MySQL的密碼（遇到報(bào)錯(cuò)可以百度錯(cuò)誤的解決方案）

通過(guò)點(diǎn)“編譯”來(lái)重新運(yùn)行項(xiàng)目

components/like/index.wxml

components/like/index.wxss

models/classic.js

pages/classic/index.js

pages/classic/index.wxml

utils/http.js

config.js

例子1：注冊(cè)后下載微信小程序的開(kāi)發(fā)工具

例子2：使用微信小程序的開(kāi)發(fā)工具來(lái)實(shí)現(xiàn)后端的處理（MySQL連接，訪(fǎng)問(wèn)路徑獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，訪(fǎng)問(wèn)路徑獲取圖片）

下面的內(nèi)容的話(huà)，如果不注釋?zhuān)竺婵赡軙?huì)報(bào)錯(cuò)

1

先在MySQL中創(chuàng)建好3個(gè)表，記得把MySQL的注冊(cè)碼等等存在自己創(chuàng)建的QQ群或百度網(wǎng)盤(pán)（很多安裝包和安裝教程，使用教程等等，自己都保存到自己的gitee或百度網(wǎng)盤(pán)或自己創(chuàng)建的QQ群等中）。

2 處理后臺(tái)代碼

（中間件進(jìn)行了亂碼處理）

檢查下面的代碼在自己的后臺(tái)代碼中有沒(méi)有，如果沒(méi)有就復(fù)制到自己的后臺(tái)代碼中

之后輸入訪(fǎng)問(wèn)路徑就可以訪(fǎng)問(wèn)圖片

下面的biz是調(diào)用了一個(gè)自己做的數(shù)據(jù)庫(kù)相關(guān)內(nèi)容的封裝的方法

下面數(shù)據(jù)庫(kù)相關(guān)的內(nèi)容要記得改成自己的數(shù)據(jù)庫(kù)名等等

以下是我對(duì)一些代碼的個(gè)人理解

例子3：創(chuàng)建微信小程序的項(xiàng)目和界面

先只留下面的4個(gè)文件，其他文件刪除

很多代碼是可以自動(dòng)生成的

在wxml中寫(xiě)html的代碼

下面是通過(guò)官網(wǎng)的API文檔設(shè)置的自定義導(dǎo)航欄

個(gè)人認(rèn)為微信小程序的文件夾和vue中的組件類(lèi)似

json中注冊(cè)要使用的組件，wxml中調(diào)用組件

index,js中data設(shè)置可以在wxml文件中用{{}}調(diào)用的變量（比如一些圖片路徑等等），就是設(shè)置組件的初始數(shù)據(jù)

:src之類(lèi)的是動(dòng)態(tài)綁定

可以用index.js文件中的setData來(lái)更新組件的狀態(tài)

例子4：封裝ajax等部分的代碼后調(diào)用，進(jìn)而讓自己可以少寫(xiě)些代碼。

很多小程序的使用教程的內(nèi)容可以到微信小程序的官網(wǎng)的API文檔中查看使用

可以封裝ajax的代碼后調(diào)用，進(jìn)而讓自己可以少寫(xiě)些代碼

不用解構(gòu)語(yǔ)法時(shí)

用更少代碼的解構(gòu)語(yǔ)法

微信小程序中國(guó)的彈出警告框用wx.showToast

常?？梢圆榭次⑿判〕绦虻拈_(kāi)發(fā)文檔https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

用CTRL+C(顯示為^C)的cmd命令關(guān)掉后臺(tái)代碼（就是把已經(jīng)開(kāi)啟的服務(wù)關(guān)掉），之后可以看到showToast的效果

百度“cmd退出當(dāng)前程序的命令”，“關(guān)閉當(dāng)前終端的cmd”等關(guān)鍵字

可以把圖標(biāo)去掉

在config.js中聲明常用的在別的界面要多次調(diào)用的內(nèi)容，比如url路徑等等，以后要用時(shí)，就可以直接用，要改內(nèi)容的話(huà)在config.js中改一次基本就可以了

在models目錄下寫(xiě)封裝ajax等請(qǐng)求數(shù)據(jù)的代碼（封裝代碼真的非常好用）

常常用回調(diào)函數(shù)來(lái)處理異步代碼，會(huì)很好用，不用callback回調(diào)函數(shù)，有時(shí)data會(huì)返回undefined

例子5：實(shí)現(xiàn)父子組件傳值

知識(shí)點(diǎn)

準(zhǔn)備：后臺(tái)代碼處理

一、創(chuàng)建新項(xiàng)目和頁(yè)面

二、app.json配置導(dǎo)航欄

三、定義和使用點(diǎn)贊組件

"四、classic在生命周期函數(shù)中請(qǐng)求后臺(tái)數(shù)據(jù)

設(shè)置-項(xiàng)目設(shè)置-勾選不校驗(yàn)..."

五、封裝Http工具類(lèi)

book:書(shū)籍表

classic：期刊表

comments:書(shū)籍評(píng)論表

like:書(shū)籍點(diǎn)贊表

"一個(gè)微信小程序的page有四個(gè)文件組成：

js文件：實(shí)現(xiàn)業(yè)務(wù)邏輯

json文件：配置文件"

wxml文件：寫(xiě)html代碼

wxss文件：寫(xiě)樣式代碼

頁(yè)面都是放在page目錄下。

組件都是放在components目錄，在一個(gè)頁(yè)面上可以使用多個(gè)組件

rpx:加入屏幕的寬度是750像素，那么將屏幕平均分成750份，那么其中的一份就是1rpx=1px

屏幕寬度是375像素，1rpx=0.5px

準(zhǔn)備：后臺(tái)代碼處理

一、創(chuàng)建新項(xiàng)目和頁(yè)面

二、app.json配置導(dǎo)航欄

三、定義和使用點(diǎn)贊組件

"四、classic在生命周期函數(shù)中請(qǐng)求后臺(tái)數(shù)據(jù)

設(shè)置-項(xiàng)目設(shè)置-勾選不校驗(yàn)..."

五、封裝Http工具類(lèi)。

六、將classic頁(yè)面的數(shù)據(jù)傳遞到like組件中（父組件傳數(shù)據(jù)到子組件）

七、實(shí)現(xiàn)movie組件

八、like組件傳遞數(shù)據(jù)到classic頁(yè)面（子傳父實(shí)現(xiàn)）

個(gè)人代碼（例子1到例子4的實(shí)現(xiàn)點(diǎn)贊組件等功能）：

創(chuàng)建微信小程序時(shí)，記得要注冊(cè)，找到自己的AppID(小程序ID)，在使用別人寫(xiě)的小程序項(xiàng)目時(shí)，可以選擇該文件夾后運(yùn)行

1

自己創(chuàng)建個(gè)查詢(xún)，當(dāng)然命名為book_wx更保險(xiǎn)（當(dāng)然，可能不創(chuàng)建查詢(xún)。直接運(yùn)行別人發(fā)的sql文件也可以創(chuàng)建表和表的數(shù)據(jù)）

直接MySQL中通過(guò)運(yùn)行sql文件創(chuàng)建表和表的數(shù)據(jù)的自己摸索出來(lái)的高效方法

雙擊查看表

有時(shí)有sql文件運(yùn)行會(huì)出錯(cuò)，那么就要修改

有些在查詢(xún)中運(yùn)行

mysql模塊要下載，數(shù)據(jù)庫(kù)名要統(tǒng)一

在后臺(tái)服務(wù)開(kāi)啟，數(shù)據(jù)庫(kù)開(kāi)啟等等后查看服務(wù)路徑是否有用

http://127.0.0.1:9001/public/images/movie.8.png

一般我喜歡會(huì)用VScode開(kāi)啟后臺(tái)服務(wù)，如果你想直接用cmd命令也可以

報(bào)Access denied for user'root'@'localhost' (using password: NO)的錯(cuò)原因是你沒(méi)有設(shè)置或設(shè)置對(duì)MySQL的密碼（遇到報(bào)錯(cuò)可以百度錯(cuò)誤的解決方案）

http://127.0.0.1:9001/getLatest

通過(guò)點(diǎn)“編譯”來(lái)重新運(yùn)行項(xiàng)目

下面我只展示要自己寫(xiě)，修改的代碼，其余不展示的基本都是可以主動(dòng)生成的代碼（全部代碼我一般都放gitee中）

//?components/like/index.js

Component({

??/**

???*?組件的屬性列表

???*/

??properties:?{

????count:?Number,

????like:?Boolean,

??},

??/**

???*?組件的初始數(shù)據(jù)

???*/

??data:?{

????yesSrc:?'/components/like/images/like.png',

????noSrc:?'/components/like/images/like@dis.png',

??},

??/**

???*?組件的方法列表

???*/

??methods:?{

????onLike(){

??????let?count?=?this.properties.count

??????let?like?=?this.properties.like

??????count?=?like???count?-?1?:?count?+?1

??????//更新組件的狀態(tài)

??????this.setData({

????????count,

????????like:?!like

??????})

????}

??}

})

index.wxml

<!--components/like/index.wxml-->

<view?class="container"?bind:tap="onLike">

????<image?src="{{like?==?'1'???yesSrc?:?noSrc}}"?/>

????<text>{{count}}</text>

</view>

/*?components/like/index.wxss?*/

.container?{

??display:?inline-flex;

??flex-direction:?row;

??padding:?10rpx;

??width:?90rpx;

}

.container?image?{

??width:?32rpx;

??height:?28rpx;

}

.container?text?{

??font-size:?24rpx;

??color:?#bbb;

??position:?relative;

??left:?6rpx;

??bottom:?10rpx;

??line-height:?24rpx;

}

classic.js

//models/classic.js

import?Http?from?'../utils/http.js'

import?config?from?'../config.js'

export?default?class?ClassicModel?extends?Http{

??//獲取最新的期刊數(shù)據(jù)

??getLatest(cb){

????this.ajax({

??????url:?`${config.base_url}getLatest`,

??????callback:?data?=>?{

????????cb(data)

??????}

????})

??}

}

?pages/classic/index.js

//?pages/classic/index.js

import?ClassicModel?from?'../../models/classic.js'

const?classicModel?=?new?ClassicModel()

Page({

??/**

???*?頁(yè)面的初始數(shù)據(jù)

???*/

??data:?{

????classicData:?null

??},

??/**

???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載

???*/

??onLoad:?function?(options)?{

????classicModel.getLatest(data?=>?{

??????console.log(data)

??????//更新數(shù)據(jù)

??????this.setData({

????????classicData:?data

??????})

????})

??},

??/**

???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成

???*/

??onReady:?function?()?{

??},

??/**

???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示

???*/

??onShow:?function?()?{

??},

??/**

???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏

???*/

??onHide:?function?()?{

??},

??/**

???*?生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載

???*/

??onUnload:?function?()?{

??},

??/**

???*?頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作

???*/

??onPullDownRefresh:?function?()?{

??},

??/**

???*?頁(yè)面上拉觸底事件的處理函數(shù)

???*/

??onReachBottom:?function?()?{

??},

??/**

???*?用戶(hù)點(diǎn)擊右上角分享

???*/

??onShareAppMessage:?function?()?{

??}

})

{

??"usingComponents":?{

????"cmp-like":"/components/like/index"

??}

}

<!--pages/classic/index.wxml-->

<cmp-like?count="{{classicData.fav_nums}}"?

????like="{{classicData.like_status}}"></cmp-like>

//utils/http.js

export?default?class?Http?{

??ajax({url,data?=?{},method?=?'get',callback}){

????wx.request({

??????url,

??????data,

??????method,

??????success:?res?=>?{

????????//獲取請(qǐng)求的狀態(tài)碼：200,404,500

????????let?code?=?res.statusCode.toString()

????????//判斷code是否是以2開(kāi)頭的，如果以2開(kāi)頭的才可以調(diào)用回調(diào)函數(shù)

????????if(code.startsWith('2'))?{

??????????callback(res.data)

????????}?else?{

??????????//彈出一個(gè)警告框

??????????this._showErr(code)

????????}???????

??????},

??????fail:?err?=>?{

????????this._showErr(err.errMsg)

??????}

????})

??}

??//私有的方法

??_showErr(msg){

????wx.showToast({

??????title:?`錯(cuò)誤代碼:${msg}`,

??????icon:?'none',

??????duration:?2000

????})

??}

}

{

??"entryPagePath":?"pages/classic/index",

??"pages":?[

????"pages/classic/index"

??],

??"window":?{

????"navigationBarBackgroundColor":?"#fff",

????"navigationBarTextStyle":?"black",

????"navigationBarTitleText":?"聽(tīng)雨軒",

????"backgroundColor":?"#eeeeee",

????"backgroundTextStyle":?"light",

????"enablePullDownRefresh":?false

??},

??"sitemapLocation":?"sitemap.json"

}

//config.js

//用來(lái)存放常量的文件

export?default?{

??base_url:?'http://127.0.0.1:9001/'

}