动手做一个校园网微信小程序当我想为我的学校做一些宣传时，我立即在校园网中推出了一个微信小程序。效果预览源码地址：Github??拜托了，我的小星星~上班前准备微信小程序开发者工具：腾讯开通了小程序个人开发平台，一个微信号即可成为小程序开发者。微信小程序设计指南：小程序是一个平台，平台上的开发者必须遵守规范。easy-mock：使用easy-mock模拟后端数据，后面会简单介绍配置。七牛云：使用七牛云进行对象存储。Directorystructure├──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└──utilspageregistration"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是页面的结构文件，类似于htmlindex.wxss是页面的样式，其实就是css；index.js是页面的逻辑，数据请求和渲染都是在这个页面上完成的。logs文件夹存放小程序的开发日志，目前没有使用。utils.js可以编写你自己的JavaScript插件。app.js处理了一些全局的逻辑，比如定义全局变量来存储获取到的用户信息，这样每个页面都能获取到用户信息。app.json是一个全局配置文件，比如设置标题栏的背景色等。app.wxss存放了页面的公共样式，如果多个页面需要使用相同的样式，可以写在这里。部分功能使用slider视图容器swiper和媒体组件video实现首页轮播效果和视频播放华东理工大学2017年招生宣传片```页面({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'}]}})微信小程序的视频组件好像只能引用.mp4后缀的视频文件，所以只能去学校网站下载宣传视频了。本来想用本地接口导入src，结果还是失败了。折腾了一整天终于在七牛云上找到了解决办法。可以先把本地资源上传到七牛云，拿到外链后就可以直接引用了。数据模拟mock.js很流行，让前端独立于后端，用它模拟校园网数据的同学不清楚可以参考：mockjs前端开发独立于后端掘金：easy-mockmock.jseasy—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":"AwardFunding"},{"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":"AdmissionPlan"}]}onLoad:function(options){//页面初始化选项是页面跳转带的参数varthat=this;wx.request({url:'https://www.easy-mock.com/mock/59082eb57a878d73716e5b73/aa/list'，方法：'GET'，数据：{}，标头：{'Accept'：'application/json'}，成功：函数（res）{console.log(res.data.items);that.setData({items:res.data.items});}})}页面初始化使用传参实现页面跳转<视图类="school-list-info"index="{{index}}">{{item.content}}//pages/photo/photo.jsPage({数据:{详情:{}},onLoad:function(options){//页面初始化选项是页面跳转带来的参数varid=options.id;this.fetchData(id);},fetchData:function(id){varurl='https://www.easy-mock.com/mock/596cb21da1d30433d8358282/fengguang-list';url+='/'+id+'?mdrender=false';console.log(url);varthat=this;wx.请求（{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.微信小程序编译包不能超过2M2.需申请合法域名，申请合法域名数量有限制。3、页面内跳转不能超过5级。4、video组件好像只能引用.mp4后缀的文件。我制作的视频在真机上有声有图，但是在开发者工具上只有声音没有页面显示。求求你回答这一点：）写到这里，一个校园网小程序已经成型。当然还有很多功能作者会陆续添加，比如在在线服务页面调用API实现页面四个窗口的功能。有兴趣的朋友可以继续关注~~~
