关注
有点恶搞的成分在里面, 前段菜鸟勿喷哈~~
项目总结地址: http://blog.csdn.net/zhyh1435589631/article/details/53149761
突然发现 牛课支持markdown了, 顺手把csdn 的blog移了过来~~~
1. 前言
牛客网第三期编程作业是体验下微信小程序的编写, 由于本菜鸟对前端这块理解并不深入,整起来比较费劲, 突然想到一个idea,
顺手简单实现一下, 基本效果如下: 有点恶搞的成分, 哈哈~~
2. 参考资料
很快论坛官网教程微天气 - 开发一个完整的微信小程序(上)微天气 - 开发一个完整的微信小程序(中)
3. 注意点
这个问题在于, 没有在utils.js 中将需要的函数进行导出
4. 基本实现
4.1 项目框架
4.2 index
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '来让我们看看百度的源码吧',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../source_get/source_get'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
index.wxml
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
4.3 source_get
source_get.js
var utils_t = require('../../utils/util.js')
Page({
data: {
data: {}
},
onLoad: function (){
var that = this;
utils_t.source_get(function(data){
that.setData({
data: "就不给你看, 你咬我呀~~~"
})
});
}
})
source_get.wxml
<!--source_get.wxml-->
<view class="container">
<view class = "top">
<view>{{data}}</view>
</view>
source_get.wxss
.top{
width: 500rpx;
height: 5rpx;
margin: 3rpx;
}
4.4 utils.js
function source_get(callback){
var url = "https://www.baidu.com";
wx.request({
url: url,
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
callback(res.data);
},
fail: function() {
// fail
callback("failed to get the source");
},
complete: function() {
// complete
}
});
}
module.exports = {
source_get: source_get
}
4.5 app
app.js
//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
app.json
{
"pages":[
"pages/index/index",
"pages/source_get/source_get"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
查看原帖
点赞 5
相关推荐
点赞 评论 收藏
分享
牛客热帖
更多
- 1... 🌟择难路,未有疑,四非学院本运气拉满,春招拿下大厂后端6.1W
- 2... 秋招应该侧重准备哪个部分的内容1.0W
- 3... 腾讯云智后台开发暑期面经8440
- 4... 史上最细SQL实战系列:sql笔试例题总结篇(建议收藏)8152
- 5... 25届毕业现在在家呆了一个多月,没工作8152
- 6... 恋爱四年没想到过自己会出轨7992
- 7... 其实主包早就找到工作了,但还是每天都刷6303
- 8... 字节实习week6:听leader吐槽当前的应届生候选人们4908
- 9... 离开软件测试才发现外面没有雨4655
- 10... 作为实习生,我问薪无愧4631
正在热议
更多
# 应届生,你找到工作了吗 #
2117次浏览 31人参与
# 双非应该如何逆袭? #
173179次浏览 2937人参与
# 现代汽车前瞻技术研发急速编程挑战赛 #
38588次浏览 278人参与
# 简历当中有水分算不算造假? #
4023次浏览 40人参与
# 春招进度记录 #
340831次浏览 3212人参与
# 实习生的蛐蛐区 #
3456次浏览 35人参与
# 谈薪时HR压价该怎么应对 #
205749次浏览 3177人参与
# 百度秋招提前批进度 #
105123次浏览 1123人参与
# 三一集团提前批进度交流 #
22166次浏览 138人参与
# 毕业旅行去哪玩儿 #
7833次浏览 123人参与
# 双非有机会进大厂吗 #
433880次浏览 4373人参与
# 正在春招的你,也参与了去年秋招吗? #
308652次浏览 2523人参与
# 非技术岗投递进展 #
144403次浏览 1264人参与
# 百度求职进展汇总 #
406241次浏览 4718人参与
# 上班到公司第一件事做什么? #
60405次浏览 521人参与
# 秋招盘点:机械人值得去的企业 #
71934次浏览 670人参与
# 材料进Fab厂真的劝退吗? #
43134次浏览 184人参与
# 我的OC时间线 #
814622次浏览 7746人参与
# 百度工作体验 #
229660次浏览 2010人参与
# 没有合适的工作,你会先找个干着,还是考公考研 #
116070次浏览 1133人参与
# 如果可以,你希望哪个公司来捞你 #
96607次浏览 397人参与