微信小程式開發實戰
自從小程式對個人開發者開放以來,就一直想著做一個自己的小程式,再關聯到自己的公眾號。
小程式截圖
———————————————————分隔線—————————————————————————
小程式簡介
名稱:隨你記
功能介紹:相當於備忘錄,跟手機自帶的記事本功能差不多,只是更簡潔高效,依託於微信,更方便
技術要點:使用了bmob第三方後臺來儲存資料到資料庫
細節問題記錄
以下簡單記錄下開發過程中遇到的一些小坑,貼出一些關鍵程式碼以供參考,當然這些程式碼有些是從網上東拼西湊複製過來的,感謝各位大神的無私分享。
1、頁面背景色
頁面的css中新增如下程式碼即可
page{
background-color : whitesmoke;
}
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 ="widgetarrow" src="../../images/list_right_arrow.png" mode="aspectFill">
</image>
<view class="line">
</view>
</button>
3、頁面返回重新整理
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
this.onLoad();
},
4、列表傳參
itemclick: function (e) {
var id = e.currentTarget.dataset.id;//記錄的唯一id
console.log(id);
wx.navigateTo({
url: '../detail/detail?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,旅遊攻略
體育:
體育培訓,線上健身