关于【积分获取】的说明关于【附件下载】的说明
查看: 1446|回复: 11

【微信小程序开发教程】校园网小程序搭建

[复制链接]

467

主题

564

帖子

18万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
185631
发表于 2017-8-14 16:04:34 | 显示全部楼层 |阅读模式

登录后查看更多内容,推荐微信扫码快速登录

您需要 登录 才可以下载或查看,没有帐号?【建议使用下方微信快捷登录注册】

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

效果预览
源码地址:Github :sparkles::sparkles:求你的小星星~
准备工作


目录结构
├── 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是页面的样式,其实就是cssindex.js是页面的逻辑,数据请求与渲染都是都在这个页面完成。
logs文件夹存放着小程序开发日志,目前暂时用不到。
utils.js可以编写自己的JavaScript插件。
app.js处理全局的一些逻辑,比如定义全局变量存放获取的用户信息,这样每个页面都可以获取用户信息。
app.json 是全局配置文件,比如设置标题栏的背景色等。
app.wxss 存放页面的公共样式,如果多个页面需要用到同一样式,就可以写在这里。

部分功能
使用滑块视图容器 swiper 和媒体组件 video 实现首页轮播图效果及视频播放
东华理工大学2017年招生宣传片
```
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大红大紫,让前端独立于后端,用它来模拟校园网数据 不太清楚使用的同学可以参考:

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
});
}
})
}


页面初始化 利用传参实现页面跳转

{{item.content}}
// 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实现页面上四个窗口的功能,有兴趣的朋友可以持续关注哟~~~



回复

使用道具 举报

0

主题

25

帖子

23

积分

新手上路

Rank: 1

积分
23
发表于 2017-8-25 12:53:28 | 显示全部楼层

回帖奖励 +1 金钱

下载学习
回复

使用道具 举报

0

主题

30

帖子

32

积分

新手上路

Rank: 1

积分
32
发表于 2017-9-4 10:43:46 | 显示全部楼层
下载学习
回复

使用道具 举报

0

主题

12

帖子

31

积分

新手上路

Rank: 1

积分
31
发表于 2017-9-4 22:06:41 | 显示全部楼层
谢谢楼主,楼主辛苦!
回复

使用道具 举报

0

主题

2

帖子

9

积分

新手上路

Rank: 1

积分
9
发表于 2017-9-13 16:13:19 | 显示全部楼层
好贴,一定不要放过,顶












2017最火正规网赚项目
第五代QQ机器人QQ群机器人论坛QQ机器人智能客服机器人QQ淘客机器人QQ群互联机器人..联系QQ800829129 演示3群:28352615
回复

使用道具 举报

0

主题

1

帖子

10

积分

禁止发言

积分
10
发表于 2017-9-29 19:53:09 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

0

主题

13

帖子

13

积分

新手上路

Rank: 1

积分
13
发表于 2017-11-17 19:50:44 | 显示全部楼层
感谢楼主,辛苦辛苦
回复

使用道具 举报

0

主题

16

帖子

17

积分

新手上路

Rank: 1

积分
17
发表于 2017-12-31 00:57:16 | 显示全部楼层
Thank you
学习
回复

使用道具 举报

0

主题

93

帖子

97

积分

注册会员

Rank: 2

积分
97
发表于 2018-3-31 11:40:47 | 显示全部楼层

好 学习学习
回复

使用道具 举报

0

主题

8

帖子

28

积分

新手上路

Rank: 1

积分
28
发表于 2018-7-31 08:10:08 | 显示全部楼层
下载学习
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|小程序大全|小程序开发者论坛-汇集最优质源码、开发者教程、小程序资源

GMT+8, 2018-12-17 14:25 , Processed in 0.218479 second(s), 10 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表