微信小程序 開(kāi)發(fā)流程介紹
借助微信小程序紅利期,開(kāi)發(fā)一個(gè)小程序能夠?yàn)榫€下實(shí)際導(dǎo)流,而對(duì)于一些線下傳統(tǒng)商家來(lái)說(shuō),開(kāi)發(fā)一個(gè)小程序沒(méi)有任何基礎(chǔ),下面為大家介紹微信小程序 開(kāi)發(fā)流程介紹,適合零基礎(chǔ)小程序開(kāi)發(fā)者。
新建小程序項(xiàng)目
一、新建項(xiàng)目選擇小程序項(xiàng)目,選擇代碼存放的硬盤路徑,填入你的小程序 AppID,給你的項(xiàng)目起一個(gè)好聽(tīng)的名字,最后,點(diǎn)擊確定,你就得到了你的小程序了開(kāi)發(fā)者工具傳送門
目錄結(jié)構(gòu)
page
index
index.js
index.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
utils
util.js
app.js
app.json
app.wxss
project.config.json
下載和安裝BmobSDK
一、把bmob-min.js和underscore.js放到相應(yīng)的文件,例如放到utils中
二、接著是在app.js中加入下面兩行代碼進(jìn)行全局初始化
const Bmob = require(\'utils/bmob.js\');
Bmob.initialize(你的Application ID, 你的REST API Key);
一、創(chuàng)建一個(gè)名字為detail的表,然后點(diǎn)擊添加列創(chuàng)建3個(gè)字段,一個(gè)一個(gè)的添加
title字段,String 類型,用于存放文章的標(biāo)題 image字段,String 類型,用于存放文章的圖片 detail字段 String類型,用于存放文章的正文 然后添加一些數(shù)據(jù)進(jìn)行測(cè)試
列表頁(yè)面實(shí)現(xiàn)
一、去到index.js中 Ctrl + A然后按Delete清空這個(gè)頁(yè)面,然后自己來(lái)寫(xiě)邏輯吧,首先我們需要引入bmob.js 然后在onLoad小程序生命周期中去請(qǐng)求detail表中的數(shù)據(jù),讓bmob和小程序完成第一次交互
//index.js
//獲取應(yīng)用實(shí)例
const Bmob = require(\'../../utils/bmob.js\'); //每個(gè)需要使用到bmob的頁(yè)面都需要引入這個(gè)js
Page({
onLoad() {
let Diary = Bmob.Object.extend(detail); //引入detail這張表
let query = new Bmob.Query(Diary);
query.find({
success: (results) => {
console.log(results)//打印數(shù)據(jù)
},
error(error) {
console.log(`查詢失敗: ${error.code } ${error.message}`);
}
});
},
})
這里完成了一次對(duì)bmob的數(shù)據(jù)查詢,bmob文檔傳送門, 這個(gè)查詢默認(rèn)返回10條記錄。當(dāng)數(shù)據(jù)多了之后,一次查詢很多數(shù)據(jù),這樣是不友好的,并不是說(shuō)bmob查詢數(shù)據(jù)慢,而是指如果將來(lái)你的用戶在網(wǎng)速比較慢的情況使用你的小程序,請(qǐng)求數(shù)據(jù)等待時(shí)間過(guò)長(zhǎng),這個(gè)等待的過(guò)程也許會(huì)導(dǎo)致用戶不再使用你的小程序。所以我們需要優(yōu)化用戶體驗(yàn)。那么將代碼改造成一上拉加載更多。
//index.js
//獲取應(yīng)用實(shí)例
const app = getApp();
const Bmob = require(\'../../utils/bmob.js\'); //每個(gè)需要使用到bmob的頁(yè)面都需要引入這個(gè)js
Page({
data: {
detail:[], //頁(yè)面數(shù)據(jù)
pagination:0, //頁(yè)碼
pageSize: 4, //每頁(yè)數(shù)據(jù)
nodata:true //無(wú)數(shù)據(jù)
},
onLoad() {
//初始頁(yè)面第一次獲取頁(yè)面數(shù)據(jù)
this.getData();
},
getData(){
let Diary = Bmob.Object.extend(detail); //引入detail這張表
let query = new Bmob.Query(Diary);
query.limit(this.data.pageSize); //返回n條數(shù)據(jù)
query.skip(this.data.pageSize * this.data.pagination); //分頁(yè)查詢
query.descending(\'createdAt\'); //已created列倒序
query.find({
success: (results) => {
let data = [];
//將得到的數(shù)據(jù)存入數(shù)組
for (let object of results) {
data.push({
id: object.id,
title: object.get(\'title\'),
image: object.get(\'image\'),
detail: object.get(\'detail\'),
createdAt: app.timeago(object.createdAt) //調(diào)用timeagoJs把日期轉(zhuǎn)成N天前格式
})
}
//判斷是否有數(shù)據(jù)返回
if(data.length){
let detail = this.data.detail; //得到頁(yè)面上已經(jīng)存在的數(shù)據(jù)(數(shù)組)
let pagination = this.data.pagination; //獲取當(dāng)前分頁(yè)(第幾頁(yè))
detail.push.apply(detail, data); //將頁(yè)面上面的數(shù)組和最新獲取到的數(shù)組進(jìn)行合并
pagination = pagination ? pagination+1 : 1; //此處用于判斷是首次渲染數(shù)據(jù)還是下拉加載渲染數(shù)據(jù)
//更新數(shù)據(jù)
this.setData({
detail: detail,
pagination: pagination
})
}else{
//沒(méi)有返回?cái)?shù)據(jù),頁(yè)面不再加載數(shù)據(jù)
this.setData({
nodata: false
})
}
},
error(error) {
console.log(`查詢失敗: ${error.code } ${error.message}`);
}
});
},
router(e) {
//跳轉(zhuǎn)至文章詳情頁(yè)
const id = e.currentTarget.dataset.id
wx.navigateTo({
url: `../detail/detail?id=${id}`
})
},
onReachBottom(){
//下拉觸底加載更多數(shù)據(jù)
this.getData();
}
})
上述代碼中在日期處使用了timeagoJs下載地址,下載timeagoJs放到util文件夾中,然后在app.js中引入。
//app.js
const Bmob = require(\'./utils/bmob.js\')
const timeago = require(./utils/timeago.min.js);
Bmob.initialize(你的Application ID, 你的REST API Key);
App({
timeago(date){
return new timeago().format(date, \'zh_CN\')
}
})
二、完成了列表頁(yè)邏輯層之后,去到index.wxml編寫(xiě)視圖層,視圖層就簡(jiǎn)單許多了,得到的數(shù)據(jù)是一個(gè)數(shù)組,數(shù)組里面是一個(gè)json,用wx:for方法把它渲染出來(lái)就好了
三、來(lái)對(duì)頁(yè)面進(jìn)行一些美化,編寫(xiě)一樣樣式吧。畢竟這是一個(gè)看臉的社會(huì)
/**index.wxss**/
.container{ padding: 30rpx;}
.pane{ width: 100%; margin-bottom:30rpx; border-radius: 5rpx; overflow: hidden; box-shadow: 0 0 10rpx rgba(0, 0, 0, .1) }
.pane image{ width: 100%; height: 240rpx; display: block;}
.pane .content{ background-color: #FFF; padding: 20rpx;}
.pane .title{ display: block; font-size: 30rpx; font-weight: bold; margin-bottom: 20rpx;}
.pane .date{ display: block; font-size: 24rpx; color: #999}
.nodata{ text-align: center; font-size: 24rpx; color: #999}
以上列表頁(yè)面算是完成了。此時(shí)點(diǎn)擊頁(yè)面的時(shí)候,應(yīng)該會(huì)報(bào)錯(cuò),提示detail頁(yè)面未配置,那來(lái)到app.json里面配置一下detail這個(gè)頁(yè)面。
以上是微信小程序 開(kāi)發(fā)流程介紹,更多關(guān)于微信小程序其他功能開(kāi)發(fā),可以關(guān)注本網(wǎng)站,謝謝。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。更多小程序請(qǐng)查看:小程序商店