我的第一个微信小程序
来源:互联网 发布:网络机房日常维护项目 编辑:程序博客网 时间:2024/05/21 04:39
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.jsApp({ 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;}
0 0
- 我的第一个微信小程序
- 我的第一个微信小程序
- 我的 第一个微信小程序
- 我的第一个微信小程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个安卓程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个程序
- 我的第一个安卓程序
- Android 中的动画
- J2SE第四章——异常(一)
- maven学习(1):win10及ubuntu安装maven
- [2016/11/13]c语言的细节问题:malloc和char*
- Contrastive Loss (对比损失)
- 我的第一个微信小程序
- 洛谷 P2331 [SCOI2005] 最大子矩阵
- U盘启动并读取dx寄存器的值
- 《疯狂Android讲义》学习笔记 -- Fragment详解
- 【模板】最短路算法的优化
- 数据结构和算法------LinkedList的实现
- (OK) Table component with sorting and pagination for Angular2
- 使用Gradle发布aar项目到JCenter仓库
- 《罗马假日》