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

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

高考完畢，想必廣大學子和家長們都在忙着查詢各所高校的信息，恰好上手微信小程序，當練手也當爲本身的學校作點宣傳，便立即擼了一個校園網微信小程序。

效果預覽

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

準備工做

• 微信小程序開發者工具：騰訊開放了小程序我的開發平臺，只須要一個微信號就能夠成爲小程序開發者了。

• 微信小程序設計指南：因爲小程序是一個平臺，因此平臺上的開發者必需要遵照規範。

•  easy-mock：使用easy-mock模擬後端數據，後面會簡單介紹配置。

• 七牛雲：使用七牛雲進行對象存儲。

目錄結構

├── 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文件夾下存放着小程序全部的業務頁面；
index文件夾就是一個頁面，index.wxml是頁面的結構文件，相似html。
index.wxss是頁面的樣式，其實就是css；index.js是頁面的邏輯，數據請求與渲染都是都在這個頁面完成。
logs文件夾存放着小程序開發日誌，目前暫時用不到。
utils.js能夠編寫本身的JavaScript插件。
app.js處理全局的一些邏輯，好比定義全局變量存放獲取的用戶信息，這樣每一個頁面均可以獲取用戶信息。
app.json 是全局配置文件，好比設置標題欄的背景色等。
app.wxss 存放頁面的公共樣式，若是多個頁面須要用到同同樣式，就能夠寫在這裏。

部分功能

使用滑塊視圖容器 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: "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後綴的視屏文件，因此筆者只能從學校網站上把宣傳視頻下載下來，原本想利用本地接口引入src，但結果仍是失敗了。糾結了一成天后終於在七牛雲上找到了解決方法。你們能夠先把本地資源上傳到七牛雲，得到外鏈以後即可直接引用了。

數據模擬

mock.js大紅大紫，讓前端獨立於後端，用它來模擬校園網數據 不太清楚使用的同窗能夠參考：
mockjs前端開發獨立於後端
掘金：easy-mock
mock.js那點事

easy—mock建立數據

{
  success: true,
  "items": [{
    "id": "1",
    "imageUrl": "http://www.gx211.com/UploadFile/FCKUpload/201108013041.jpg",
    "content": "學校簡介",
    "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": "重點學科"
  }, {
    "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": "學費標準"
  }, {
    "id": "8",
    "imageUrl": "http://img2.imgtn.bdimg.com/it/u=2733238079,2840645485&fm=214&gp=0.jpg",
    "content": "招生計劃"
  }]
}

onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
    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爲頁面跳轉所帶來的參數
    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.須要申請合法域名，請求裏合法域名有個數限制。
3.頁面內跳轉不能超過5級。
4.視頻組件貌似只能引用.mp4後綴的文件，本身製做的視頻在真機上有聲音有畫面，但在開發者工具上卻只有聲音沒有頁面顯示，這點跪求大佬解答:)

寫到這裏，一個小型的校園網小程序就已經成型了。固然以後還有許多功能筆者也會陸續添加，好比在在線服務頁面分別調用api實現頁面上四個窗口的功能，有興趣的朋友能夠持續關注喲~~~