微信小程式開發實戰
自從小程式對個人開發者開放以來，就一直想著做一個自己的小程式，再關聯到自己的公眾號。
小程式截圖
———————————————————分隔線————————————————————————— 
小程式簡介
名稱：隨你記
功能介紹：相當於備忘錄，跟手機自帶的記事本功能差不多，只是更簡潔高效，依託於微信，更方便
技術要點：使用了bmob第三方後臺來儲存資料到資料庫
細節問題記錄
以下簡單記錄下開發過程中遇到的一些小坑，貼出一些關鍵程式碼以供參考，當然這些程式碼有些是從網上東拼西湊複製過來的，感謝各位大神的無私分享。
1、頁面背景色
頁面的css中新增如下程式碼即可
page{
background-color 2、客服訊息按鈕
主要是open-type屬性設定為contact，其他樣式自己發揮
<button class="listitem" open-type="contact">
<view class="line"></view>
<view class="leftitem">
<view style="margin:5px;color:black;font-size:12px">聯絡客服</view>
</view>
<image class 3、頁面返回重新整理
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
this.onLoad();
},4、列表傳參
itemclick: function (e) {
var id = e.currentTarget.dataset.id;//記錄的唯一id 接收引數
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
console.log(options.id);
});5、確認對話方塊
<modal title="刪除記錄" hidden="{{modalHidden}}" confirm-text="確定" cancel-text="取消"
bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">確定刪除該條記錄嗎？</modal>js中實現方法
showModal: function () {
this.setData({
modalHidden: !this.data.modalHidden
})
},6、載入列表及重新整理
<view class="listitem" bindtap="itemclick" wx:for="{{items}}" wx:for-item="item" wx:key="key"
data-id="{{item.objectId}}" data-title="{{item.title}}">
<view class="leftitem">
<view style="margin:5px;color:black;font-size:16px"> {{item.title}}</view>
<view style="margin:5px;color:grey;font-size:12px"> {{item.createdAt}}</view>
</view>
<image class="widgetarrow" src="../../images/list_right_arrow.png" mode="aspectFill">
</image>
</view>重新整理
onPullDownRefresh: function () {
wx.stopPullDownRefresh();
var that = this;
loadList(that);
},7、底部選單tabbar及頁面
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#d81e06",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "images/bottom_index_selected.png",
"iconPath": "images/bottom_index.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/bottom_add_selected.png",
"iconPath": "images/bottom_add.png",
"pagePath": "pages/add/addNote",
"text": "新增"
},
{
"selectedIconPath": "images/bottom_help_selected.png",
"iconPath": "images/bottom_help.png",
"pagePath": "pages/help/help",
"text": "幫助"
}
]
},"pages":[
"pages/index/index",
"pages/add/addNote",
"pages/logs/logs",
"pages/help/help",
"pages/helpDoc/helpDoc",
"pages/detail/detail"
],8、js修改style控制控制元件的顯示
通過setData
that.setData({
items: results,
nodata: 'block'//顯示
});<text style="margin:100px;display:{{nodata}}">暫無資料</text> onLoad: function () {
var that = this
wx.login({
success: function (res) {
console.log("res.code====="+res.code);
if (res.code) {
//發起網路請求
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=wxaasdf22we1sdffe3&secret=83ebdsdfsdfa7sdfsdf3448ff3f71&js_code=' + res.code + '&grant_type=authorization_code',
method: "POST",
success: function (res) {
that.setData({
openid: res.data.openid
})
}
})
} else {
console.log('獲取使用者登入態失敗！' + res.errMsg)
}
}
});
}/* wxml */
<view class="diy">
<text>開發實戰</text>
</view>
/* wxss */
.diy{
display: flex;
align-items: center;
//justify-content: center;
}稽核進展
2017-06-05 晚提交稽核
2017-06-08 中午稽核被拒，提示原因：:小程式服務內容涉及備忘錄，屬未開放類目；去後臺修改類目，發現並沒有提供備忘錄選項，而印象筆記的小程式顯示的確實備忘錄服務類目，讓我無法理解，小程式的社群問答中心也是充斥了關於稽核慢的問題，然後我添加了一個辦公類目，繼續提交稽核，等待結果。
2017-06-12 晚上通知再審被拒，理由與之前一樣。
個人服務類目
以下是從小程式後臺中摘錄出來的個人開發者的可選服務類目列表，共9大分類：
教育：
線上教育，教育資訊服務，嬰幼兒教育，特殊人群教育，教育裝備
生活服務：
生活繳費，綜合生活服務平臺，票務，家政，外送，攝影/擴印，婚慶服務，環保回收/廢品回收
工具：
辦公，效率，字典，圖片/音訊/視訊，計算類，報價/比價，資訊查詢，健康管理，企業管理，記賬，日曆，天氣，預約/報名
商業服務：
法律服務，農林牧漁，廣告/設計，公關/推廣/市場調查，會展服務，一般財務服務
快遞業與郵政：
郵政，裝卸搬運，快遞、物流
出行與交通：
代駕
餐飲：
點評與推薦，菜譜，餐廳排隊，點餐，外賣
旅遊：
出境WiFi，旅遊攻略
體育：
體育培訓，線上健身