ylbtech-小程序-demo:快速开始
1.返回顶部
1、app.js
//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}
})

2、app.json
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle":"black"}
}

3、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;
} 

4、project.config.json
{"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": []}}
}

5、pages
6、utils
-uitl.js
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
}

7、
2. pages返回顶部
1、index
a) .js
//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})}
})

b) .json
c) .wxml
<!--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>

d) .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;
}

e)
2、logs
a) .js
//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))})})}
})

b) .json
{"navigationBarTitleText": "查看启动日志"
}

c) .wxml
<!--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>

d) .wxss
.log-list {display: flex;flex-direction: column;padding: 40rpx;
}
.log-item {margin: 10rpx;
}

e)
3、

3.返回顶部
 
4.返回顶部
5.返回顶部
0、
https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zip?t=1476197480996
1、
6.返回顶部
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/storebook/p/9512038.html

小程序-demo:快速开始相关推荐

  1. 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)

    7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: 小程序资讯与小程序教程 一张图带你看懂小程序发展蓝皮书 2017-07-19 微信小程序开发问答&l ...

  2. 小程序开发教程、小程序资讯、小程序demo、小程序实战等合揖(7月19日更新)...

    2019独角兽企业重金招聘Python工程师标准>>> 7月19日微信小程序联盟更新的小程序开发教程.小程序资讯.小程序demo.小程序实战内容合揖如下: #小程序资讯与小程序教程 ...

  3. 【小程序demo】带你玩转支付宝小程序之获取会员信息

    火速围观!支付宝近期推出了一系列小程序示例,不仅提供在线体验而且提供全部源代码,示例涵盖了:会员信息.小程序二维码.刷脸认证.小程序支付.模板消息.支付宝卡包和线下买单7个高频使用场景.直接下载源代码 ...

  4. 小程序源码 租房管理系统_如何通过租房小程序开发快速引流

    租房市场在整个房产市场占据了极大一部分市场份额,而随着租售同权政策的提出.房价的不断提升,租房市场份额将进一步扩大. 合肥小程序开发智速新媒体公司 传统的租房方式不管是出租方还是租房客户,彼此之间的消 ...

  5. java小程序贪吃蛇代码_微信小程序Demo之贪食蛇

    原标题:微信小程序Demo之贪食蛇 差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局 关于小程序笔者就不做介绍 ...

  6. 最常用的小程序demo

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  7. 微信小程序开发快速上手

    微信小程序开发快速上手 由于学生工作需要,我最近在一些工具书的参考帮助下尝试进行了微信小程序的开发,本文主要内容为我本人在近期微信小程序开发的过程中,关于指定类型的微信小程序开发的一点心得体会. 1. ...

  8. 如何快速开通流量主要求微信小程序如何快速开通流量主

    微信小程序如何快速开通流量主要求 其次还需要准备一些资料 1身份证. 2银行卡(最好是四大银行或者是比较大的银行,地方的银行可能不支持). 3提交完成后会需要时间审核的(大概7天到15天). 4不用等 ...

  9. 微信小程序开发快速入门

    最近整理文件,找到一个18年写的微信小程序开发快速入门,对于新手还是值得一看的,三年多过去了,可能一些接口已经更新了,不过,整体思想还是没变的. 如果你熟悉JavaScript,那你基本上看完这个文档 ...

  10. 房屋收租小程序开发快速搭建

    房屋收租小程序开发,房屋收租小程序开发快速搭建.伴随着城市化进程过程加速,在我国外来人口总数也在持续提升,租房子要求越来越大,促进了在我国房产租赁领域的发展趋势.可是伴随着租房子需要的逐步提升,传统式 ...

最新文章

  1. 秋天 | 等疫情过后,我们继续背起相机去旅行
  2. 20151217jqueryUI--自动补全工具
  3. python怎么计算积分_Python 计算积分实例
  4. SAP License:SAP S/4HANA就是答案
  5. 空降新书榜,霸占前三甲,还有什么是这些书做不到的?!
  6. IT兄弟连 JavaWeb教程 Servlet 状态管理 会话跟踪
  7. Qt 防止程序二次运行 实现应用单例
  8. 《java编程思想》
  9. awr报告 解读_最详尽的AWR报告详细分析
  10. 中科院SCI期刊分区(又称JCR期刊分区)知多少
  11. html5图片如何变成圆圈,h5中使用canvas把图片缩放并且剪切成圆形
  12. 详解Python曲线拟合
  13. 全年股价暴涨超110% TTD能否杀出巨头们的围墙花园?
  14. 从晶体管开始聊聊计算机为什么采用二进制
  15. 《交互设计》作业-第四周
  16. 1047: 阿姆斯特朗数
  17. [转载]我的时间管理与方法论
  18. 计算机课设微程序最大值,计算机组成原理课程设计(微程序设计).doc
  19. 基于无线NRF24L01的ardunio遥控小车
  20. 回顾“90后”——MISRA的25年岁月

热门文章

  1. API文档和代码片段管理器:​​​​Dash
  2. 《程序员自我修养》阅读笔记-可执行文件装载与进程
  3. Web开发笔记(一)
  4. TimescaleDB 简单试用
  5. Netflix的zuul使用
  6. pl/sql developer 快捷操作: 显示不可见字符 显示历史sql语句 拷贝整个sql窗口的语句至新的sql窗口...
  7. MySQL crash-safe replication
  8. debian 修改apache2 https 端口为11443
  9. [Android动画] 补间动画-动画工具类( AnimationUtils)七
  10. Apache站点下载大文件不完整原因及解决办法