微信小程序?qū)W習(xí) 動(dòng)手?jǐn)]一個(gè)校園網(wǎng)小程序

wdzgege 發(fā)布于2019-08-01 17:12 / 590人閱讀

摘要：動(dòng)手?jǐn)]一個(gè)校園網(wǎng)微信小程序高考完畢，想必廣大學(xué)子和家長(zhǎng)們都在忙著查詢各所高校的信息，剛好上手微信小程序，當(dāng)練手也當(dāng)為自己的學(xué)校做點(diǎn)宣傳，便當(dāng)即擼了一個(gè)校園網(wǎng)微信小程序。

動(dòng)手?jǐn)]一個(gè)校園網(wǎng)微信小程序

高考完畢，想必廣大學(xué)子和家長(zhǎng)們都在忙著查詢各所高校的信息，剛好上手微信小程序，當(dāng)練手也當(dāng)為自己的學(xué)校做點(diǎn)宣傳，便當(dāng)即擼了一個(gè)校園網(wǎng)微信小程序。

效果預(yù)覽

源碼地址：Github??求你的小星星～ 準(zhǔn)備工作

微信小程序開(kāi)發(fā)者工具：騰訊開(kāi)放了小程序個(gè)人開(kāi)發(fā)平臺(tái)，只需要一個(gè)微信號(hào)就可以成為小程序開(kāi)發(fā)者了。

微信小程序設(shè)計(jì)指南：由于小程序是一個(gè)平臺(tái)，所以平臺(tái)上的開(kāi)發(fā)者必須要遵守規(guī)范。

?easy-mock：使用easy-mock模擬后端數(shù)據(jù)，后面會(huì)簡(jiǎn)單介紹配置。

七牛云：使用七牛云進(jìn)行對(duì)象存儲(chǔ)。

目錄結(jié)構(gòu)

├── 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

頁(yè)面注冊(cè)

  "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ù)頁(yè)面；
index文件夾就是一個(gè)頁(yè)面，index.wxml是頁(yè)面的結(jié)構(gòu)文件，類似html。
index.wxss是頁(yè)面的樣式，其實(shí)就是css；index.js是頁(yè)面的邏輯，數(shù)據(jù)請(qǐng)求與渲染都是都在這個(gè)頁(yè)面完成。
logs文件夾存放著小程序開(kāi)發(fā)日志，目前暫時(shí)用不到。
utils.js可以編寫自己的JavaScript插件。
app.js處理全局的一些邏輯，比如定義全局變量存放獲取的用戶信息，這樣每個(gè)頁(yè)面都可以獲取用戶信息。
app.json 是全局配置文件，比如設(shè)置標(biāo)題欄的背景色等。
app.wxss 存放頁(yè)面的公共樣式，如果多個(gè)頁(yè)面需要用到同一樣式，就可以寫在這里。

部分功能 使用滑塊視圖容器 swiper 和媒體組件 video 實(shí)現(xiàn)首頁(yè)輪播圖效果及視頻播放

```

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)站上把宣傳視頻下載下來(lái)，本來(lái)想利用本地接口引入src，但結(jié)果還是失敗了。糾結(jié)了一整天后終于在七牛云上找到了解決方法。大家可以先把本地資源上傳到七牛云，獲得外鏈之后便可直接引用了。

數(shù)據(jù)模擬

mock.js大紅大紫，讓前端獨(dú)立于后端，用它來(lái)模擬校園網(wǎng)數(shù)據(jù) 不太清楚使用的同學(xué)可以參考：
mockjs前端開(kāi)發(fā)獨(dú)立于后端
掘金：easy-mock
mock.js那點(diǎn)事

easy—mock創(chuàng)建數(shù)據(jù)

{
  success: true,
  "items": [{
    "id": "1",
    "imageUrl": "http://www.gx211.com/UploadFile/FCKUpload/201108013041.jpg",
    "content": "學(xué)校簡(jiǎn)介",
    "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": "答考生問(wèn)"
  }, {
    "id": "4",
    "imageUrl": "http://y2.ifengimg.com/a/2016_16/82049a7aba08898.jpg",
    "content": "獎(jiǎng)勵(lì)資助"
  }, {
    "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": "特色班級(jí)"
  }, {
    "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": "招生計(jì)劃"
  }]
}

onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(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
        });
      }
    })
  }

頁(yè)面初始化利用傳參實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)


  
    
      
        
          
          {{item.content}}

// pages/photo/photo.js
Page({
  data:{
    detail: {}
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(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]
        });
      }
    })
  },
})

總結(jié)一下踩過(guò)的坑

1.微信小程序的編譯包是不能超過(guò)2M。
2.需要申請(qǐng)合法域名，請(qǐng)求里合法域名有個(gè)數(shù)限制。
3.頁(yè)面內(nèi)跳轉(zhuǎn)不能超過(guò)5級(jí)。
4.視頻組件貌似只能引用.mp4后綴的文件，自己制作的視頻在真機(jī)上有聲音有畫面，但在開(kāi)發(fā)者工具上卻只有聲音沒(méi)有頁(yè)面顯示，這點(diǎn)跪求大佬解答:)

寫到這里，一個(gè)小型的校園網(wǎng)小程序就已經(jīng)成型了。當(dāng)然之后還有許多功能筆者也會(huì)陸續(xù)添加，比如在在線服務(wù)頁(yè)面分別調(diào)用api實(shí)現(xiàn)頁(yè)面上四個(gè)窗口的功能，有興趣的朋友可以持續(xù)關(guān)注喲~~~