看到不少入門的小程序開發者不斷的問重復性的問題，我們從實戰角度開發了這個課程，希望能夠幫助大家了解小程序開發。
課程分三天：
- 第一天：微信小程序開發入門
- 第二天：給小程序接入云端數據
- 第三天：完善我的小程序
第三天：完善我的小程序
（一）如何在頁面之間傳遞參數
1. 傳遞參數
我們已經實現了首頁到內容頁面之間的跳轉，但并沒有區分到底是從哪個分類跳轉過去的。為此，我們還需要從index頁面傳遞分類名到detail頁面。
修改index.wxml文件中的navigator組件代碼如下：
<navigator style="border-color: {{link.color}};" class="btn" url="/pages/detail/detail?name={{link.name}}" wx:for="{{columnlinks}}" wx:for-item="link">{{link.name}}</navigator>
即，在原來的url尾部加上了“?name={{link.name}”。
2. 接收參數
回到detail.js文件，修改onLoad方法如下：
onLoad(options) {this.setData({name:options.name})},
options對象會存放從上一個頁面傳遞過來的參數，在這里options.name就是index頁面傳遞過來的分類名，我們通過this.setData()方法把它綁定到name這個變量中去。
現在你在detail.wxml文件中加上{{name}}，可以看到分類名成功地傳遞過來了。
（二）獲取一條評語內容
從Comment評語內容表的設計和數據添加我們可以看到，每個分類下都有很多的評語，而我們這個小程序每次只需要顯示其中一個。所以，我們需要編寫一個從Comment表指定分類中獲取一條記錄的代碼。
- 首先，在detail.js的數據初始化代碼中定義一個index變量，初始值為0，表示要獲取的那條數據在Comment表指定分類中屬于第幾條。代碼如下：
data: {index:0},
- 接著，在onLoad()方法中編寫如下的代碼：
onLoad(options) {this.setData({name:options.name,content:''})const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index)query.limit(1)query.find().then(res => {this.setData({content:res[0].content,index:this.data.index + 1});})},
這里需要說明幾點：
-
query.equalTo方法是Bmob SDK提供的條件查詢方法。在這個例子中，我們要查詢的條件是categoryname字段的值等于this.data.name（傳遞過來的分類名）的值。注意：這里用的是==號，而不是=號。
-
query.skip(m)和query.limit(n)方法經常配合一起使用，skip方法表示跳過前面m條數據，limit方法表示最多獲取n條數據。
-
this.setData綁定數據的時候別忘記了index:this.data.index+1，表示我們接下來要獲取的是下一條數據。
現在，數據已經獲取到了，我們還要把它呈現在界面中。修改detail.wxml文件，代碼如下：
<textarea value="{{content}}" class="txt"></textarea>
<view class="row-btn"><button class="bt">換一個</button><button class="bt">復制</button><button class="bt">分享</button>
</view>
修改dtail.wxss文件，給組件添加樣式，代碼如下：
page{padding: 20rpx;
}
.txt{width: 95%;height: 30vh;border-radius: 16rpx ;background: rgb(240, 240, 240);box-sizing: border-box;padding: 20rpx;
}
.row-btn{display: flex;justify-content:space-between;margin-top: 20rpx;margin-right: 20rpx;
}
.bt{color: white;width: 100px !important;background-color: green;margin-right: 10rpx;
}
這里需要了解的是，page樣式是針對整個頁面的。比如，這里通過padding: 20rpx控制頁面內部的組件離邊框20rpx。
完成后預覽的效果如下：
（三）封裝成一個方法
現在，點擊“換一個”按鈕，textarea的內容并不會有任何變化，我們還需要給這個按鈕添加點擊事件。
打開detail.js文件，添加getContent()方法，并在onLoad()方法中用this.getContent()調用這個方法。代碼如下：
onLoad(options) {this.setData({name:options.name,content:''})this.getContent();},getContent(){const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index);query.limit(1);query.find().then(res => {this.setData({content:res[0].content,index:this.data.index + 1});});},
這里需要說明的是：
-
getContent()方法是我們自定義的方法，名稱可以改變。
-
getContent()方法可以放在detail.js文件里面和onLoad()、onReady()等方法同級的任何地方。
-
不要漏掉getContent(){ }, 這個方法最后的英文逗號。
（四）給“換一個”按鈕綁定方法
現在，我們可以給“換一個”按鈕綁定（bind:tap）剛寫的getContent方法。修改detail.wxml文件如下：
<button class="bt" bind:tap="getContent">換一個</button>
現在點擊“換一個”按鈕，已經會不斷切換評語內容。
（五）學會看調試器
我們點擊多幾次之后，會發現頁面內容一直保持不變。
觀察開發工具中的“調試器”，看到下面的錯誤提示信息：
這是因為我們已經翻看到這個分類下的最后一條記錄了。為了解決這個問題，需要簡單修改getContent()方法：
getContent(){const query = wx.Bmob.Query("Comment");query.equalTo("categoryname","==",this.data.name);query.skip(this.data.index);query.limit(1);query.find().then(res => {if(res.length<=0){this.setData({index:0})this.getContent()}else{this.setData({content:res[0].content,index:this.data.index + 1});}});},
即，查詢結果回來之后，我們先判斷這個結果是否有內容。如果沒有的話，設置index為0，并再次獲取。
為了讓界面效果更具有動感，我們還可以和之前一樣，在請求時加上wx.showLoading()和wx.hideLoading()方法。這個自行嘗試添加。
（六）實現更多的功能（復制、分享和客服）
為了實現復制的功能，我們像上面一樣，添加一個copy()方法，代碼如下：
opy(){wx.setClipboardData({data: this.data.content,})},
這個代碼很容易理解，即把this.data.content的內容復制到剪切板中去。
我們再把copy()方法綁定到“復制”按鈕中去：
<button class="bt" bind:tap="copy">復制</button>
完成之后，預覽效果如下：
小程序還內置了其他的方法，讓我們不需要編寫額外的代碼，下面我們給“分享”按鈕綁定內置的分享功能：
<button class="bt" open-type="share">分享</button>
預覽效果如下：
聯系“客服”的事件和分享的事件類似，代碼如下：
<button open-type="contact" class="bt">客服</button>
（七）如何選擇小程序的開發主題
開發并不難，只要你肯耐心點，花時間按這個課程的步驟一步一步去實踐，很快就會掌握小程序開發的經驗。
等你掌握好小程序開發技術，可能會更讓你困惑的是：我應該選擇什么樣的開發主題？中國人口那么多，為什么我開發出來的應用沒有人用？
這是因為我們開發產品前沒有好好地進行調研。這里，我們推薦一個小程序：微信指數。
當你有一個好想法或者想給小程序取名的時候，建議打開這個小程序，查看和你想法相關的各種關鍵詞對應的指數熱度。如果指數熱度很低，那你就要好好審視你這個想法或者名字到底是不是一個好的創意，好的名字。在一個很多魚的大池塘里面釣魚，雖然釣的人多，但機會也更多。在一個連小魚小蝦都沒有幾個的野池塘，雖然沒有什么人來競爭，但你也很難釣到魚。
我們的課程到此為止，有任何問題歡迎大家一起交流技術（wechat: xiaowon12），享受寫程序的樂趣。
源碼請查看：https://gitee.com/zhang-ming-123/threedaystudyminiprogram
 - 圖像畸變校正)
