设为首页收藏本站祝大家感恩节快乐!

英语交流吧论坛

 找回密码
 立即注册
1 2 3 4
查看: 20|回复: 0

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

[复制链接]
发表于 2019-1-8 12:10:12 | 显示全部楼层 |阅读模式

动手撸一个校园网微信小程序:  关注微信第三方平台,有帮助!

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

       
       
                效果预览
       
       
               
       
       
                源码地址:G::::求你的小星星~
       
       
               

       
       
                准备工作
       
       
               
                        微信小程序开发者工具:腾讯开放了小程序个人开发平台,只需要一个微信号就可以成为小程序开发者了。
               
               
                        微信小程序设计指南:由于小程序是一个平台,所以平台上的开发者必须要遵守规范。
               
               
                        -:使用-模拟后端数据,后面会简单介绍配置。
               
               
                        七牛云:使用七牛云进行对象存储。
               
       
       
               
       
       
               
       
       
                目录结构
       
       
                ├── .
       
       
                ├── .
       
       
                ├── .
       
       
                ├──
       
       
                ├──
       
       
                │ ├── KFC
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ ├──
       
       
                │ │ ├── .
       
       
                │ │ ├── .
       
       
                │ │ └── .
       
       
                │ └──
       
       
                │ ├── .
       
       
                │ ├── .
       
       
                │ └── .
       
       
                └──
       
       
               

       
       
                页面注册
       
       
               
       
       
               
                       
                               
                                       
                                                "":[
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//",
                                       
                                       
                                                "//"
                                       
                                       
                                                ]
                                       
                               
                       
               
       
       
                文件夹下存放着小程序所有的业务页面;
       
       
                文件夹就是一个页面,.是页面的结构文件,类似。
       
       
                .是页面的样式,其实就是;.是页面的逻辑,数据请求与渲染都是都在这个页面完成。
       
       
                文件夹存放着小程序开发日志,目前暂时用不到。
       
       
                .可以编写自己的JS插件。
       
       
                .处理全局的一些逻辑,比如定义全局变量存放获取的用户信息,这样每个页面都可以获取用户信息。
       
       
                .是全局配置文件,比如设置标题栏的背景色等。
       
       
                .存放页面的公共样式,如果多个页面需要用到同一样式,就可以写在这里。
       
       
               

       
       
                部分功能
       
       
                使用滑块视图容器和媒体组件实现首页轮播图效果及视频播放
       
       
               
       
       
               
                       
                               
                                       
                                                &; ="" -="" ="" ="" =""&;
                                       
                                       
                                                &; :="{{}}" :=""&;
                                       
                                       
                                                &;-&;
                                       
                                       
                                                &; ="_" ="{{.}}"/&;
                                       
                                       
                                                &;/-&;
                                       
                                       
                                                &;/&;&;/&;
                                       
                                       
                                                &; =""&;
                                       
                                       
                                                &; ="{{}}"  =":%"&;&;/&;
                                       
                                       
                                                &; ="-"&;
                                       
                                       
                                                &; ="BT"&;东华理工大学年招生宣传片&;/&;
                                       
                                       
                                                &;/&;&;/&;```
                                       
                               
                       
               
       
       
                P({
       
       
                :{
       
       
               
       
       
               
                       
                               
                                       
                                                : "://.../.",: [
                                       
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                : '://...//_//////----.'
                                       
                                       
                                                },
                                       
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                : '://.../_//////----.'
                                       
                                       
                                                },
                                       
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                : '://...//_//////----.'
                                       
                                       
                                                },
                                       
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                : '://...//_//////----.'
                                       
                                       
                                                },
                                       
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                : '://...//_//////----.'
                                       
                                       
                                                }
                                       
                                       
                                                ]}
                                       
                                       
                                                })
                                       
                               
                       
               
       
       
                貌似微信小程序的组件只能引用.后缀的视屏文件,所以笔者只能从学校网站上把宣传视频下载下来,本来想利用本地接口引入,但结果还是失败了。纠结了一整天后终于在七牛云上找到了解决方法。大家可以先把本地资源上传到七牛云,获得外链之后便可直接引用了。
       
       
               

       
       
                数据模拟
       
       
                .大红大紫,让前端独立于后端,用它来模拟校园网数据 不太清楚使用的同学可以参考:
       
       
                前端开发独立于后端
       
       
                掘金:-
       
       
                .那点事
       
       
               

       
       
                —创建数据
       
       
               
                       
                               
                                       
                                                {
                                       
                                       
                                                : ,
                                       
                                       
                                                "": [{
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://../UF/FCKU/.",
                                       
                                       
                                                "": "学校简介",
                                       
                                       
                                                "U": "://..////_."
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://.../////.",
                                       
                                       
                                                "": "招生章程"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://..////W.",
                                       
                                       
                                                "": "答考生问"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://..//_/.",
                                       
                                       
                                                "": "奖励资助"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://.../////.",
                                       
                                       
                                                "": "重点学科"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://.../////.",
                                       
                                       
                                                "": "特色班级"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://.../////.",
                                       
                                       
                                                "": "学费标准"
                                       
                                       
                                                }, {
                                       
                                       
                                                "": "",
                                       
                                       
                                                "U": "://...//=,&;=&;=.",
                                       
                                       
                                                "": "招生计划"
                                       
                                       
                                                }]
                                       
                                       
                                                }
                                       

                               
                       
               
       
       
               
                       
                               
                                       
                                                L){
                                       
                                       
                                               
                                       
                                       
                                                //页面初始化为页面跳转所带来的参数
                                       
                                       
                                                  = ;
                                       
                                       
                                                .({
                                       
                                       
                                                : '://.-.////',
                                       
                                       
                                                : 'GET',
                                       
                                       
                                                : {},
                                       
                                       
                                                : {
                                       
                                       
                                                'A': '/'
                                       
                                       
                                                },
                                       
                                       
                                                : () {
                                       
                                       
                                                .(..);
                                       
                                       
                                                .D({
                                       
                                       
                                                : ..
                                       
                                       
                                                });
                                       
                                       
                                                }
                                       
                                       
                                                })
                                       
                                       
                                                }
                                       

                               
                       
               
       
       
               

       
       
                页面初始化利用传参实现页面跳转
       
       
               
       
       
               
       
       
               
                       
                               
                                       
                                                &; =""&;
                                       
                                       
                                                &; :="{{}}" :=""&;
                                       
                                       
                                                &; ="-"&;
                                       
                                       
                                                &; ="///?={{.}}"&;
                                       
                                       
                                                &; ="--" ="{{}}"&;
                                       
                                       
                                                &; ="--" ="{{.U}}"/&;
                                       
                                       
                                                &; ="--"&;{{.}}&;/&;
                                       
                                       
                                                &;/&;
                                       
                                       
                                                &;/&;
                                       
                                       
                                                &;/&;
                                       
                                       
                                                &;/&;&;/&;
                                       
                               
                       
               
       
       
               
       
       
               
                       
                               
                                       
                                                // //.
                                       
                                       
                                                P({
                                       
                                       
                                                :{
                                       
                                       
                                                : {}
                                       
                                       
                                                },
                                       
                                       
                                                L){
                                       
                                       
                                                //页面初始化为页面跳转所带来的参数
                                       
                                       
                                                  = .;
                                       
                                       
                                                .D();
                                       
                                       
                                                },
                                       
                                       
                                                D: () {
                                       
                                       
                                                  = '://.-.///-';
                                       
                                       
                                                 += '/' +  + '?=';
                                       
                                       
                                                .();
                                       
                                       
                                                  = ;
                                       
                                       
                                                .({
                                       
                                       
                                                : ,
                                       
                                       
                                                : 'GET',
                                       
                                       
                                                : {},
                                       
                                       
                                                : {
                                       
                                       
                                                'A': '/'
                                       
                                       
                                                },
                                       
                                       
                                                : () {
                                       
                                       
                                                .(..[]);
                                       
                                       
                                               
                                       
                                       
                                                .D({
                                       
                                       
                                                : ..[]
                                       
                                       
                                                });
                                       
                                       
                                                }
                                       
                                       
                                                })
                                       
                                       
                                                },
                                       
                                       
                                                })
                                       
                                       
                                               
                                       
                               
                       
               
       
       
               

       
       
                总结一下踩过的坑
       
       
                .微信小程序的编译包是不能超过M。
       
       
                .需要申请合法域名,请求里合法域名有个数限制。
       
       
                .页面内跳转不能超过级。
       
       
                .视频组件貌似只能引用.后缀的文件,自己制作的视频在真机上有声音有画面,但在开发者工具上却只有声音没有页面显示,这点跪求大佬解答
       
       
                写到这里,一个小型的校园网小程序就已经成型了。当然之后还有许多功能笔者也会陆续添加,比如在在线服务页面分别调用实现页面上四个窗口的功能,有兴趣的朋友可以持续关注哟~~~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


Archiver|小黑屋|英语交流吧 ( 皖ICP备10015231号 )  

GMT+8, 2019-1-17 07:20 , Processed in 0.156201 second(s), 31 queries .

Powered by Discuz! X3

© 2001-2013 Comsenz Inc.

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