動手擼一個校園網微信小程序

高考完畢，想必廣大學(xue)子和家(jia)長們都在忙著(zhu)查(cha)詢(xun)各所高校的信息，剛(gang)好(hao)上手微信小程序，當(dang)練(lian)手也當(dang)為自(zi)己的學(xue)校做點宣(xuan)傳，便當(dang)即擼了一個(ge)校園網(wang)微信小程序。

效果預覽

源碼地址： 求你的小星星～

準備工作

• 微(wei)信(xin)小程序(xu)開(kai)發(fa)者(zhe)工具(ju) ：騰(teng)訊開(kai)放了小程序(xu)個(ge)人(ren)開(kai)發(fa)平臺，只(zhi)需要一個(ge)微(wei)信(xin)號就可以(yi)成為小程序(xu)開(kai)發(fa)者(zhe)了。

• 微信小程序設計指南 ：由(you)于小程序是一個(ge)平(ping)臺，所以平(ping)臺上的(de)開發者必須要(yao)遵守(shou)規范。

•  easy-mock ：使(shi)用easy-mock模擬后端(duan)數據，后面會簡單介紹配置。

• 七牛(niu)云(yun) ：使用七牛(niu)云(yun)進行對(dui)象存(cun)儲。

目錄結構

├── 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文件夾下(xia)存(cun)放著小程序(xu)所有的業務頁(ye)面；

index文件(jian)夾就是(shi)(shi)一(yi)個頁(ye)面(mian)(mian)，index.wxml是(shi)(shi)頁(ye)面(mian)(mian)的結構文件(jian)，類似html。

index.wxss是(shi)(shi)頁(ye)面的樣(yang)式(shi)，其實就是(shi)(shi)css；index.js是(shi)(shi)頁(ye)面的邏輯，數(shu)據(ju)請(qing)求與渲染都(dou)是(shi)(shi)都(dou)在這個(ge)頁(ye)面完成。

logs文件夾存放著小(xiao)程序開發日志，目前暫時用(yong)不到(dao)。

utils.js可(ke)以編(bian)寫自己的(de)JavaScript插件。

app.js處理全局(ju)的一些邏(luo)輯，比如定義全局(ju)變量(liang)存放獲取的用戶信(xin)息(xi)，這樣每(mei)個頁面都可以獲取用戶信(xin)息(xi)。

app.json 是(shi)全局配(pei)置(zhi)文件(jian)，比如設置(zhi)標題欄的背景色等。

app.wxss 存放頁(ye)面的公共樣(yang)式(shi)(shi)，如果多個(ge)頁(ye)面需要用到同一樣(yang)式(shi)(shi)，就可以寫在這里。

部分功能

使用滑塊視圖容器 swiper 和媒體組件 video 實現首頁輪播圖效果及視頻播放

<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">東華理工大學2017年招生宣傳片</button>
       </view>
</view>```

Page({

data:{

src: "//ote98cgj7.bkt.clouddn.com/1.mp4",
banners: [
    {
      id: 1,
      img: '//www.ecit.edu.cn//_upload/article/images/1b/f6/51a824f744738eb236d3b4b674cd/742f55dd-6902-4507-b975-02cce136c86a.jpg'
    },
    {
      id: 2,
      img: '//www.ecit.edu.cn/_upload/article/images/74/e6/40d823f44087b3430a88a33cb521/7502f000-8070-4364-88f0-c82a00bd8dab.jpg'
    },
    {
      id: 3,
      img: '//www.ecit.edu.cn//_upload/article/images/e1/54/9974a6ea4d33bb03b10c32c93294/4197d31c-714f-4e26-abd5-29390ead402b.jpg'
    },
    {
      id: 4,
      img: '//www.ecit.edu.cn//_upload/article/images/be/1d/16a5906c48a4819da575babd4f24/041eff9c-a1b6-46c1-923d-8c24a1afd820.jpg'
    },
    {
      id: 5,
      img: '//www.ecit.edu.cn//_upload/article/images/b7/b9/4921297845bd9c91c6cd40f9ddfa/ed564459-80d3-43df-afa4-b262d5dbb65a.jpg'
    }
  ]}
  })

貌似微信小程序的video組件(jian)只能引(yin)用(yong)(yong).mp4后(hou)綴(zhui)的視(shi)屏文件(jian)，所以筆者只能從學(xue)校網(wang)站上把宣(xuan)傳視(shi)頻下(xia)載下(xia)來，本來想利(li)用(yong)(yong)本地(di)接口引(yin)入src，但(dan)結果還是失(shi)敗(bai)了。糾結了一(yi)整天后(hou)終于在(zai)七牛云上找到了解決方法。大家可以先把本地(di)資源上傳到七牛云，獲(huo)得外鏈之后(hou)便可直(zhi)接引(yin)用(yong)(yong)了。

數據模擬

easy—mock創建數據

{
  success: true,
  "items": [{
    "id": "1",
    "imageUrl": "//www.gx211.com/UploadFile/FCKUpload/201108013041.jpg",
    "content": "學校簡介(jie)",
    "phontUrl": "//down.tutu001.com/d/file/20140621/984dcbc46b5233c523613731ad_560.jpg"
  }, {
    "id": "2",
    "imageUrl": "//202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160614164629716.jpg",
    "content": "招生章(zhang)程"
  }, {
    "id": "3",
    "imageUrl": "//www.eol.cn/jiangxi/xiaoyuanjx/201603/W020160330371181916413.jpg",
    "content": "答考(kao)生問"
  }, {
    "id": "4",
    "imageUrl": "//y2.ifengimg.com/a/2016_16/82049a7aba08898.jpg",
    "content": "獎勵(li)資助"
  }, {
    "id": "5",
    "imageUrl": "//202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160518165538781.jpg",
    "content": "重(zhong)點學科"
  }, {
    "id": "6",
    "imageUrl": "//202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/201605192131336.jpg",
    "content": "特色(se)班級"
  }, {
    "id": "7",
    "imageUrl": "//202.101.244.180/ecitweb2007/news2007/uploadfile/newstxt/20160429143146269.jpg",
    "content": "學(xue)費標準"
  }, {
    "id": "8",
    "imageUrl": "//img2.imgtn.bdimg.com/it/u=2733238079,2840645485&fm=214&gp=0.jpg",
    "content": "招生計劃(hua)"
  }]
}

onLoad:function(options){
    // 頁面初(chu)始化 options為頁面跳轉所帶來的參數(shu)
    var that = this;
    wx.request({
      url: '//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){
    // 頁(ye)面初始化 options為頁(ye)面跳轉(zhuan)所(suo)帶來(lai)的參數
    var id = options.id;
    this.fetchData(id);
  },
  fetchData: function(id) {
    var url = '//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.微信小程序的編譯包是不能超過(guo)2M。

2.需要申(shen)請合(he)法(fa)域名，請求里合(he)法(fa)域名有個數限制。

3.頁面(mian)內跳轉不能超過(guo)5級。

4.視(shi)頻組件貌似只(zhi)能引用.mp4后綴的(de)文件，自(zi)己制作的(de)視(shi)頻在(zai)真機上有(you)聲音(yin)有(you)畫面(mian)(mian)，但(dan)在(zai)開發者工具上卻(que)只(zhi)有(you)聲音(yin)沒有(you)頁面(mian)(mian)顯(xian)示(shi)，這點跪求大佬(lao)解答(da):)

寫到這里(li)，一(yi)個小型(xing)的校園(yuan)網小程序就已(yi)經成型(xing)了。當然之后還有許(xu)多功能筆者(zhe)也會陸續(xu)添加，比(bi)如在(zai)在(zai)線(xian)服務頁(ye)面(mian)分(fen)別(bie)調(diao)用api實現頁(ye)面(mian)上四個窗口的功能，有興趣(qu)的朋(peng)友可以持續(xu)關(guan)注喲(yo)~~~