动手撸一个校园网微信小程序

高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序。

效果预览

源码地址: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实现页面上四个窗口的功能,有兴趣的朋友可以持续关注哟~~~

微信小程序学习 动手撸一个校园网小程序的更多相关文章

  1. 自己动手撸一个LinkedList

    自己动手撸一个LinkedList 1. 原理 LinkedList是基于双链表的动态数组,数据添加删除效率高,只需要改变指针指向即可,但是访问数据的平均效率低,需要对链表进行遍历.因此,Linked ...

  2. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  3. Spring学习之第一个hello world程序

    Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson 在其著作Expert One-On-One J2EE Development a ...

  4. C语言学习-01第一个C语言程序

    一 C语言的历史 C语言是一门通用计算机编程语言,应用广泛.C语言的设计目标是提供一种能以简易的方式编译.处理低级存储器.产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言. 尽管C语言提供 ...

  5. python学习(10)字典学习,写一个三级菜单程序

    学习了字典的应用.按老师的要求写一个三级菜单程序. 三级菜单程序需求如下: 1.深圳市的区--街道--社区---小区4级 2.建立一个字典,把各级区域都装进字典里 3.用户可以从1级进入2级再进入3级 ...

  6. 【转载】ASP.NET MVC Web API 学习笔记---第一个Web API程序

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  7. ASP.NET MVC Web API 学习笔记---第一个Web API程序【转】

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html 1. Web API简单说明 近来很多大型的平台都公开了Web API. ...

  8. ASP.NET MVC Web API 学习笔记---第一个Web API程序---近来很多大型的平台都公开了Web API

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  9. C学习笔记-第一个C语言程序

    第一个C语言程序 #include<stdio.h> //1 int main() //2 { printf("This is a C language"); //3 ...

随机推荐

  1. Automatic Setup of a Humanoid

    The humanoid animation option in Unity 4 makes it possible to retarget the same animations to differ ...

  2. 32)PHP,遍历对象的属性或者属性值

    首先是遍历属性: <?php class A{ ; ; ; function fetchAllProp(){ //遍历时,key取得属性名,value取得对应值 foreach($this as ...

  3. O - Snacks(DFS序)

    百度科技园内有nn个零食机,零食机之间通过n−1n−1条路相互连通.每个零食机都有一个值vv,表示为小度熊提供零食的价值. 由于零食被频繁的消耗和补充,零食机的价值vv会时常发生变化.小度熊只能从编号 ...

  4. day39-进程-队列

    #队列Queue:进程之间数据是隔离的,不共享的,但是通过multiprocessing的Queue可以实现进程之间的通信. #1.先进先出:把1 2 3放到队列里,按1 2 3的顺序拿出来. fro ...

  5. css后续篇

    5.盒模型 在css中,box model这一术语是用来设计和布局时使用的,在网页中显示一些方方正正的盒子,这种盒子就叫盒模型 盒模型有两种: 标准模型和IE模型(了解) 盒模型属性 width : ...

  6. Python爬虫之爬取站内所有图片

    title date tags layut Python爬虫之爬取站内所有图片 2018-10-07 Python post 目标是 http://www.5442.com/meinv/ 如需在非li ...

  7. php mb_substr()函数的详细解释!

    PHP substr()函数可以分割文字,但要分割的文字如果包括中文字符往往会遇到问题,这时可以用mb_substr()/mb_strcut这个函数,mb_substr() /mb_strcut的用法 ...

  8. OpenAL介绍

    OpenAL(Open Audio Library)是自由软件界的跨平台音效API,由Loki Software,使用在Windows.Linux 系统上,用在音效缓冲和收听中编码. OpenAL设计 ...

  9. 经典题型-打印小星星(python)

    # * # * * # * * * # * * * * # * * * * * x = 0 while x < 5: x += 1 # 每次循环需要给y赋值0.清空y中存储的值 y = 0 wh ...

  10. JS Style Guide_1

    当你在回调函数里要使用函数表达式时,尽量使用箭头函数,比如数组中的 Map.filter.reduce等的回调函数中 [1,2,3].map((x) => { let y = x + 1; re ...