解决问题,方便生活,为大学校园中,企业园区里洗衣服还要办理洗衣卡,洗衣服的时候还得揣着一张洗衣卡,只需要拿着手机扫一扫就能完美解决,轻客洗衣微信小程序。下来看看该小程序“轻客”,本人写了几个自己觉得主要的功能,还有部分功能待编写中,欢迎各位看官批评,同时跪求各位看官收藏点赞,不胜感激,上效果图:
概览.gif
注:PC端无法实现扫码,弹出打开文件框
一、准备工作
小程序吗,慢慢玩儿,微信给玩家提供了一大推你所需要的各种各种,你只要一个微信号就行。在开发小程序时,对小程序有个大概的认识就行,不求多牛逼,记得我心目中的大佬说过,不要发等你好牛逼了才来做牛逼的事,慢慢做,碰到问题解决问题,你就能牛逼起来,一台PC,同时匹配PC下载好微信小程序的开发者工具,编辑器,有很多种,本人用的VSCode,接下来就开始干了。
二、前期开发工作
打开微信公众平台网页见地址:mp.weixin.qq.com/,实名注册一个,扫码登录微信公众平台,点击设置->开发设置拿到属于自己的专属AppID(小程序ID),详见下图:
小程序ID.png
复制该AppID(小程序ID)至微信开发者工具,取名、选定文件夹 -> 添加项目,得到的页面又是这样的:
Hello World.png
单击左上角编辑,出现如下界面:
tree.png
pages文件夹下存放着小程序所有的业务功能实现页面,一般默认有俩,分别为index和logs;
index文件夹就是一个页面,index.wxml是页面的结构文件,类似html。
index.wxss是页面的样式,其实就是css;
index.js是页面的逻辑,数据请求与渲染都是都在这个页面完成。
logs文件夹存放着小程序开发日志,目前暂时用不到。
utils.js可以编写自己的JavaScript插件。
app.js处理全局的一些逻辑,比如定义全局变量存放获取的用户信息,这样每个页面都可以获取用户信息。
app.json 是全局配置文件,比如设置标题栏的背景色等。
app.wxss 存放页面的公共样式,如果多个页面需要用到同一样式,就可以写在这里。
项目按钮显示预览二维码,用于真机调试。必须真机调试测试代码
更加详细的文档参见:
mp.weixin.qq.com/debug/wxado…
还有微信ui库的地址: weui.io/
三、分析业务创建所需页面结构
1、首先分析我们做的小程序有哪些需要用到的业务,创建相应的page,即在app.json文件里添加相应的代码,下图是我的.json页面:
myjson.png
创建了相应的page,同时删除了原有的Index和logs。
2、编写相应的通用样式,在app.wxss文件里编写,我就啥也没写,还注释了里面的代码。
3、经过上述第一步搭建好了页面结构,同事一样,上波图,更直观:
mytree.png
四、页面设计效果
1、首页大图,也是标志性的Logo(logo文件夹)
logo.gif
该页面跳转设计了点击跳转和定时跳转两种跳转方式,点击跳转可能.gif文件展示的不是很好 logo.js代码:
bindLogoTap: function() {
wx.navigateTo({
url: '../iconInformation/iconInformation'
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 设置初始计时秒数
let time = 2;
// 开始定时器
this.timer = setInterval(() => {
this.setData({
time: -- time
});
// 读完秒后携带洗衣机编号跳转到计费页
if(time < 0){
clearInterval(this.timer)
wx.navigateTo({
url: '../iconInformation/iconInformation'
})
}
},1000)
},
logo.wxml代码:
<view class="logo">
<image bindtap="bindLogoTap" class="logo_page" </