動手?jǐn)]一個校園網(wǎng)微信小程序高考完畢,想必廣大學(xué)子和家長們都在忙著查詢各所高校的信息,剛好上手微信小程序,當(dāng)練手也當(dāng)為自己的學(xué)校做點(diǎn)宣傳,便當(dāng)即擼了一個校園網(wǎng)微信小程序。效果預(yù)覽源碼地址:Github:sparkle ...
高考完畢,想必廣大學(xué)子和家長們都在忙著查詢各所高校的信息,剛好上手微信小程序,當(dāng)練手也當(dāng)為自己的學(xué)校做點(diǎn)宣傳,便當(dāng)即擼了一個校園網(wǎng)微信小程序。
微信小程序開發(fā)者工具 :騰訊開放了小程序個人開發(fā)平臺,只需要一個微信號就可以成為小程序開發(fā)者了。
微信小程序設(shè)計指南 :由于小程序是一個平臺,所以平臺上的開發(fā)者必須要遵守規(guī)范。
easy-mock :使用easy-mock模擬后端數(shù)據(jù),后面會簡單介紹配置。
七牛云 :使用七牛云進(jìn)行對象存儲。
├── app.js
├── app.json
├── app.wxss
├── image
├── pages
│ ├── KFC
│ │ ├── detail.js
│ │ ├── detail.wxml
│ │ └── detail.wxss
│ ├── fengguagn
│ │ ├── fengguang.js
│ │ ├── fengguang.wxml
│ │ └── fengguang.wxss
│ ├── fuwu
│ │ ├── fuwu.js
│ │ ├── fuwu.wxml
│ │ └── fuwu.wxss
│ ├── index
│ │ ├── index.js
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── logs
│ │ ├── logs.js
│ │ ├── logs.json
│ │ ├── logs.wxml
│ │ └── logs.wxss
│ ├── photo
│ │ ├── photo.js
│ │ ├── photo.wxml
│ │ └── photo.wxss
│ ├── zhaosheng
│ │ ├── zhaosheng.js
│ │ ├── zhaosheng.wxml
│ │ └── zhaosheng.wxss
│ └── zhuanye
│ ├── zhuanye.js
│ ├── zhuanye.wxml
│ └── zhuanye.wxss
└── utils
"pages":[
"pages/zhaosheng/zhaosheng",
"pages/fengguang/fengguang",
"pages/zhuanye/zhuanye",
"pages/photo/photo",
"pages/fuwu/fuwu",
"pages/detail/detail",
"pages/index/index",
"pages/logs/logs"
]
pages文件夾下存放著小程序所有的業(yè)務(wù)頁面;
index文件夾就是一個頁面,index.wxml是頁面的結(jié)構(gòu)文件,類似html。
index.wxss是頁面的樣式,其實(shí)就是css;index.js是頁面的邏輯,數(shù)據(jù)請求與渲染都是都在這個頁面完成。
logs文件夾存放著小程序開發(fā)日志,目前暫時用不到。
utils.js可以編寫自己的JavaScript插件。
app.js處理全局的一些邏輯,比如定義全局變量存放獲取的用戶信息,這樣每個頁面都可以獲取用戶信息。
app.json 是全局配置文件,比如設(shè)置標(biāo)題欄的背景色等。
app.wxss 存放頁面的公共樣式,如果多個頁面需要用到同一樣式,就可以寫在這里。
<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500">
<block wx:for="{{banners}}" wx:key="id">
<swiper-item>
<image class="banner_image" src="{{item.img}}"/>
</swiper-item>
</block>
</swiper>
<view class="audio">
<video src="{{src}}" controls style="width:100%"></video>
<view class="btn-area">
<button bindtap="bindButtonTap">東華理工大學(xué)2017年招生宣傳片</button>
</view>
</view>```
Page({
data:{
src: "http://ote98cgj7.bkt.clouddn.com/1.mp4",
banners: [
{
id: 1,
img: 'http://www.ecit.edu.cn//_upload/article/images/1b/f6/51a824f744738eb236d3b4b674cd/742f55dd-6902-4507-b975-02cce136c86a.jpg'
},
{
id: 2,
img: 'http://www.ecit.edu.cn/_upload/article/images/74/e6/40d823f44087b3430a88a33cb521/7502f000-8070-4364-88f0-c82a00bd8dab.jpg'
},
{
id: 3,
img: 'http://www.ecit.edu.cn//_upload/article/images/e1/54/9974a6ea4d33bb03b10c32c93294/4197d31c-714f-4e26-abd5-29390ead402b.jpg'
},
{
id: 4,
img: 'http://www.ecit.edu.cn//_upload/article/images/be/1d/16a5906c48a4819da575babd4f24/041eff9c-a1b6-46c1-923d-8c24a1afd820.jpg'
},
{
id: 5,
img: 'http://www.ecit.edu.cn//_upload/article/images/b7/b9/4921297845bd9c91c6cd40f9ddfa/ed564459-80d3-43df-afa4-b262d5dbb65a.jpg'
}
]}
})
貌似微信小程序的video組件只能引用.mp4后綴的視屏文件,所以筆者只能從學(xué)校網(wǎng)站上把宣傳視頻下載下來,本來想利用本地接口引入src,但結(jié)果還是失敗了。糾結(jié)了一整天后終于在七牛云上找到了解決方法。大家可以先把本地資源上傳到七牛云,獲得外鏈之后便可直接引用了。
mock.js大紅大紫,讓前端獨(dú)立于后端,用它來模擬校園網(wǎng)數(shù)據(jù) 不太清楚使用的同學(xué)可以參考:
mockjs前端開發(fā)獨(dú)立于后端
掘金:easy-mock
mock.js那點(diǎn)事
{
success: true,
"items": [{
"id": "1",
"imageUrl": "http://www.gx211.com/UploadFile/FCKUpload/201108013041.jpg",
"content": "學(xué)校簡介",
"phontUrl": "http://down.tutu001.com/d/file/20140621/984dcbc46b5233c523613731ad_560.jpg"
}, {
"id": "2",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160614164629716.jpg",
"content": "招生章程"
}, {
"id": "3",
"imageUrl": "http://www.eol.cn/jiangxi/xiaoyuanjx/201603/W020160330371181916413.jpg",
"content": "答考生問"
}, {
"id": "4",
"imageUrl": "http://y2.ifengimg.com/a/2016_16/82049a7aba08898.jpg",
"content": "獎勵資助"
}, {
"id": "5",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160518165538781.jpg",
"content": "重點(diǎn)學(xué)科"
}, {
"id": "6",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/201605192131336.jpg",
"content": "特色班級"
}, {
"id": "7",
"imageUrl": "http://202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160429143146269.jpg",
"content": "學(xué)費(fèi)標(biāo)準(zhǔn)"
}, {
"id": "8",
"imageUrl": "http://img2.imgtn.bdimg.com/it/u=2733238079,2840645485&fm=214&gp=0.jpg",
"content": "招生計劃"
}]
}
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
var that = this;
wx.request({
url: 'https://www.easy-mock.com/mock/59082eb57a878d73716e5b73/aa/list',
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
console.log(res.data.items);
that.setData({
items: res.data.items
});
}
})
}
<view class="schoollist">
<block wx:for="{{items}}" wx:key="item">
<view class="school-list">
<navigator url="/pages/photo/photo?id={{item.id}}">
<view class="school-list-info" index="{{index}}">
<image class="school-list-photo" src="{{item.imageUrl}}"/>
<text class="school-list-desc">{{item.content}}</text>
</view>
</navigator>
</view>
</block>
</view>
// pages/photo/photo.js
Page({
data:{
detail: {}
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
var id = options.id;
this.fetchData(id);
},
fetchData: function(id) {
var url = 'https://www.easy-mock.com/mock/596cb21da1d30433d8358282/fengguang-list';
url += '/' + id + '?mdrender=false';
console.log(url);
var that = this;
wx.request({
url: url,
method: 'GET',
data: {},
header: {
'Accept': 'application/json'
},
success: function(res) {
console.log(res.data.data[0]);
that.setData({
detail: res.data.data[0]
});
}
})
},
})
1.微信小程序的編譯包是不能超過2M。
2.需要申請合法域名,請求里合法域名有個數(shù)限制。
3.頁面內(nèi)跳轉(zhuǎn)不能超過5級。
4.視頻組件貌似只能引用.mp4后綴的文件,自己制作的視頻在真機(jī)上有聲音有畫面,但在開發(fā)者工具上卻只有聲音沒有頁面顯示,這點(diǎn)跪求大佬解答:)
寫到這里,一個小型的校園網(wǎng)小程序就已經(jīng)成型了。當(dāng)然之后還有許多功能筆者也會陸續(xù)添加,比如在在線服務(wù)頁面分別調(diào)用api實(shí)現(xiàn)頁面上四個窗口的功能,有興趣的朋友可以持續(xù)關(guān)注喲~~~
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)