05 - 微信小程序实例开发

本文章来自【知识林】

实例主要功能

星座运势
历史上的今天
QQ吉凶查询
使用tabbar做底部导航菜单
自定义工具函数myDate.js
页面跳转、页面返回
事件绑定

先看效果图

关键代码分析

tabBar部份代码

"tabBar": {"selectedColor": "#99322d","list": [{"pagePath": "pages/index/index","text": "星座运势","iconPath": "pages/imgs/xz2.png","selectedIconPath": "pages/imgs/xz1.png"}, {"pagePath": "pages/history/index","text": "历史今天","iconPath": "pages/imgs/history2.png","selectedIconPath": "pages/imgs/history1.png"}, {"pagePath": "pages/qq/index","text": "QQ吉凶","iconPath": "pages/imgs/qq2.png","selectedIconPath": "pages/imgs/qq1.png"}]
}

星座运势首页逻辑层代码

Page({data:{},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},showDetail: function(e) {var name = e.currentTarget.dataset.nameconsole.log(name);wx.navigateTo({url: '/pages/constellation-detail/index?name='+name})}
})

星座运势首页视图层部份代码

<view class="title-part">星座运势
</view><view class="index-container"><view class="single-view" data-name="白羊座" bindtap="showDetail"><image src="../imgs/baiyang.png" mode="widthFix"></image><text>白羊座</text></view><view class="single-view" data-name="金牛座" bindtap="showDetail"><image src="../imgs/jinniu.png" mode="widthFix"></image><text>金牛座</text></view>……
</view><view class="footer-part">点击星座查看运势，仅供娱乐！
</view>

星座运势首页样式表

.single-view {width:19%; border:1px #dfdfdf solid; float:left; margin: 19px 0px 5px 2.2%;padding:5px; border-radius:5px; text-align: center; align-items: center;}
.single-view image {width:100%;
}
.single-view text {font-size:30rpx; color:brown;
}

星座运势详情页逻辑层代码

Page({data:{name:'',today:{},year:{}},onLoad:function(options){// 生命周期函数--监听页面加载var name = options.name;this.setData({name: name});this.loadData(name, "today");this.loadData(name, "year");},loadData: function(name, type) {var that = this;var key = "057d56db14bcf4dc5d6f8f5736b0df95";var url = "http://web.juhe.cn:8080/constellation/getAll";wx.request({url: url,data: {consName: name,key:key,type:type},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTsuccess: function(res){// successif("today"==type) {var data = res.data;that.setData({today: {datetime:data.datetime,all:data.all.replace("%", ""),color:data.color,health: data.health.replace("%", ""),love: data.love.replace("%", ""),money: data.money.replace("%", ""),number:data.number,QFriend: data.QFriend,summary: data.summary,work: data.work.replace("%", "")}});} else if("year"==type) {console.log(res);that.setData({year: res.data});}}})},goBack: function() {wx.navigateBack({delta: 1 // 回退前 delta(默认为1) 页面})}
})

历史上的今天逻辑层代码

// pages/history/index.js
var util = require("../../utils/myDate.js");
Page({data:{day:'',today:{}},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数var day = options.day;if(!day) {day = util.buildDay(0); //今天}this.setData({day: day});this.loadData(day);},loadData: function(day) {var that = this;var key = "03d6f756332d667e8446c4f1be4cf39b";var url = "http://v.juhe.cn/todayOnhistory/queryEvent.php";wx.request({url: url,data: {key: key,date: day},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTsuccess: function(res){// successconsole.log(res);that.setData({today: res.data.result});}})}
})

自己封装的myDate.js代码

function buildDay(flag) {var a = newDate(flag);var month = a.getMonth()+1;var day = a.getDate();return month+"/"+day;
}//添减天
function newDate(flag) {var a = new Date();var long = a.valueOf();long = long + flag * 24 * 60 * 60 * 1000;a = new Date(long);return a;
}module.exports = {buildDay: buildDay
}

QQ 吉凶查询逻辑层代码

Page({data:{qq:'',result:'请输入QQ号码查询',detail:'----'},onLoad:function(options){// 生命周期函数--监听页面加载},loadData: function(qq) {var that = this;var key = "e32c2619ad9beec999e729afcfb3cce7";var url = "http://japi.juhe.cn/qqevaluate/qq";wx.request({url: url,data: {key: key,qq: qq},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTsuccess: function(res){// successconsole.log(res);that.setData({qq: qq,result: res.data.result.data.conclusion,detail: res.data.result.data.analysis});}})},changeQQ: function(e) {var qq = e.detail.value;//console.log(qq);this.setData({qq: qq});},queryData: function(e) {var qq = this.data.qq;if(qq=='') {wx.showToast({title: 'QQ号码为空！', icon:"loading"});} else {this.loadData(qq);}}
})

以上只是贴出了一些相对关键的代码，直接使用无法运行。

机器人的接口参考了聚合数据，也感谢聚合数据为我们提供了各种接口。

本文章源代码：https://github.com/zsl131/wx-app-study/tree/master/constellation

本文章来自【知识林】

05 - 微信小程序实例开发 - 综合小娱乐相关推荐

微信小程序中开发的小坑
微信小程序中开发的小坑本文随时更新微信小程序开发过程中遇到的小坑.现已收集如下. 微信小程序编译后的大小不能超过1MB. 微信小程序不能建立两个(含)以上的WebStock连接.
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
小程序云开发搜索功能的实现正则_码code | 如何借助小程序云开发实现小程序支付功能...
转载来源:编程小石头我们在做小程序支付相关的开发时,总会遇到这些难题.小程序调用微信支付时,必须要有自己的服务器,有自己的备案域名,有自己的后台开发.这就导致我们做小程序支付时的成本很大. 本节就来 ...
小程序云开发_小程序开发进入云原生时代加速构建开发者生态
2019-11-07 16:44 作为Serverless理念大规模落地的最佳实践,"小程序·云开发"正受到越来越多的关注. 11月7日,在腾讯Techo开发者大会"小程 ...
小程序_小程序开发，小程序定制开发，小程序搭建，小程序系统开发
说了那么久的小程序的应用场景,今天就跟大家聊些技术上的话题,聊聊小程序定制开发成本以及开发周期问题,希望能给一些对小程序感兴趣的商家们一些参考.一般的小程序7天左右就可以搞定,具体开发成本请接着往下看 ...
借助小程序云开发实现小程序的登陆注册功能
小程序云开发讲解视频:https://edu.csdn.net/course/detail/9604 有了云开发我们不仅可以方便的获取到用户的openid,还可以通过云开发的数据库来存储用户信息,进而 ...
小程序云开发--组队小管家
由室友设计,我开发的一个微信小程序发现里面的功能个人主体的账号无法上线,需要注册企业账号,故开源出来,觉得有帮助的在github点个star吧. 下载地址 https://github.com/we ...
微信小程序实例开发教程之知乎新闻
前面写了几篇文章,简单地介绍了一下小程序.相信完整看下来的读者,对微信小程序应该有了一定的认识.学习,需要边学边练,这样掌握起来快,反正我喜欢这么去学习一样新的技术.学而不思则罔,思而不学则殆嘛.下面 ...
07-微信小程序商城精品推荐（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）
精品推荐本节讲解精品推荐"区域标题"和"产品列表"的界面实现.效果如图12-15所示. 1.应用知识点分析应用知识点包括:  一行2列的布局使用.  本 ...

05 - 微信小程序实例开发 - 综合小娱乐

实例主要功能

先看效果图

关键代码分析

05 - 微信小程序实例开发 - 综合小娱乐相关推荐

最新文章

热门文章