小程序-demo:快速开始
ylbtech-小程序-demo:快速开始 |
1.返回顶部 |
//app.js App({onLaunch: function () {// 展示本地存储能力var logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录 wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId }})// 获取用户信息 wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}}})}}})},globalData: {userInfo: null} })
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"} }
/**app.wxss**/ .container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box; }
{"description": "项目配置文件。","packOptions": {"ignore": []},"setting": {"urlCheck": true,"es6": true,"postcss": true,"minified": true,"newFeature": true},"compileType": "miniprogram","libVersion": "2.2.3","appid": "wx7d22ab7088f2db6a","projectname": "appApp","isGameTourist": false,"condition": {"search": {"current": -1,"list": []},"conversation": {"current": -1,"list": []},"game": {"currentL": -1,"list": []},"miniprogram": {"current": -1,"list": []}} }
const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') }const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n }module.exports = {formatTime: formatTime }
2. pages返回顶部 |
//index.js //获取应用实例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件处理函数bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })
<!--index.wxml--> <view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><view class="usermotto"><text class="user-motto">{{motto}}</text></view> </view>
/**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; }
//logs.js const util = require('../../utils/util.js')Page({data: {logs: []},onLoad: function () {this.setData({logs: (wx.getStorageSync('logs') || []).map(log => {return util.formatTime(new Date(log))})})} })
{"navigationBarTitleText": "查看启动日志" }
<!--logs.wxml--> <view class="container log-list"><block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text></block> </view>
.log-list {display: flex;flex-direction: column;padding: 40rpx; } .log-item {margin: 10rpx; }
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
转载于:https://www.cnblogs.com/storebook/p/9512038.html
小程序-demo:快速开始相关推荐
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)
7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...
- 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)...
2019独角兽企业重金招聘Python工程师标准>>> 7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: #小程序资讯与小程序教程 ...
- 【小程序demo】带你玩转支付宝小程序之获取会员信息
火速围观!支付宝近期推出了一系列小程序示例,不仅提供在线体验而且提供全部源代码,示例涵盖了:会员信息.小程序二维码.刷脸认证.小程序支付.模板消息.支付宝卡包和线下买单7个高频使用场景.直接下载源代码 ...
- 小程序源码 租房管理系统_如何通过租房小程序开发快速引流
租房市场在整个房产市场占据了极大一部分市场份额,而随着租售同权政策的提出.房价的不断提升,租房市场份额将进一步扩大. 合肥小程序开发智速新媒体公司 传统的租房方式不管是出租方还是租房客户,彼此之间的消 ...
- java小程序贪吃蛇代码_微信小程序Demo之贪食蛇
原标题:微信小程序Demo之贪食蛇 差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局 关于小程序笔者就不做介绍 ...
- 最常用的小程序demo
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序开发快速上手
微信小程序开发快速上手 由于学生工作需要,我最近在一些工具书的参考帮助下尝试进行了微信小程序的开发,本文主要内容为我本人在近期微信小程序开发的过程中,关于指定类型的微信小程序开发的一点心得体会. 1. ...
- 如何快速开通流量主要求微信小程序如何快速开通流量主
微信小程序如何快速开通流量主要求 其次还需要准备一些资料 1身份证. 2银行卡(最好是四大银行或者是比较大的银行,地方的银行可能不支持). 3提交完成后会需要时间审核的(大概7天到15天). 4不用等 ...
- 微信小程序开发快速入门
最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...
- 房屋收租小程序开发快速搭建
房屋收租小程序开发,房屋收租小程序开发快速搭建.伴随着城市化进程过程加速,在我国外来人口总数也在持续提升,租房子要求越来越大,促进了在我国房产租赁领域的发展趋势.可是伴随着租房子需要的逐步提升,传统式 ...
最新文章
- 秋天 | 等疫情过后,我们继续背起相机去旅行
- 20151217jqueryUI--自动补全工具
- python怎么计算积分_Python 计算积分实例
- SAP License:SAP S/4HANA就是答案
- 空降新书榜,霸占前三甲,还有什么是这些书做不到的?!
- IT兄弟连 JavaWeb教程 Servlet 状态管理 会话跟踪
- Qt 防止程序二次运行 实现应用单例
- 《java编程思想》
- awr报告 解读_最详尽的AWR报告详细分析
- 中科院SCI期刊分区(又称JCR期刊分区)知多少
- html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形
- 详解Python曲线拟合
- 全年股价暴涨超110% TTD能否杀出巨头们的围墙花园?
- 从晶体管开始聊聊计算机为什么采用二进制
- 《交互设计》作业-第四周
- 1047: 阿姆斯特朗数
- [转载]我的时间管理与方法论
- 计算机课设微程序最大值,计算机组成原理课程设计(微程序设计).doc
- 基于无线NRF24L01的ardunio遥控小车
- 回顾“90后”——MISRA的25年岁月
热门文章
- API文档和代码片段管理器:​​​​Dash
- 《程序员自我修养》阅读笔记-可执行文件装载与进程
- Web开发笔记(一)
- TimescaleDB 简单试用
- Netflix的zuul使用
- pl/sql developer 快捷操作: 显示不可见字符 显示历史sql语句 拷贝整个sql窗口的语句至新的sql窗口...
- MySQL crash-safe replication
- debian 修改apache2 https 端口为11443
- [Android动画] 补间动画-动画工具类( AnimationUtils)七
- Apache站点下载大文件不完整原因及解决办法