微信小程序helloworld结构
来源:互联网 发布:仿电商微信小程序源码 编辑:程序博客网 时间:2024/05/11 19:45
初始化项目时可以看到一个helloworld的项目
代码结构
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;}
app.wxss是全局的css文件,在这个文件个定义的css样式,真个应用中的所有页面都可以使用,是一个全局样式。
app.json
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
app.json是整个程序的全局配置文件,具体配置的作用可以阅读官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=1475052047016
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.js是真个程序的生命周期文件,App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
具体说明参看官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/app.html?t=1475052055990
utils/util.js
function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')}function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}module.exports = { formatTime: formatTime}
util.js是时间格式化工具
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.wxml可看作是一个页面的视图文件,可以看作是HTML文件
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;}.userBottom{ margin-top: 250px;}
index.wxss 可以看作是页面的样式文件,可以看作是css文件
index.js
//index.js//获取应用实例var app = getApp()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})
index.js 可以看到是页面的生命周期文件,主要是页面生命周期、事件回调、业务处理等
logs
这个目录下的和index下的一样的结果,只不过是显示日志文件,可以删除的
0 0
- 微信小程序helloworld结构
- openwrt的结构 与 编写 HelloWorld程序
- openwrt的结构与编写 HelloWorld程序
- openwrt的结构 与 编写 HelloWorld程序
- openwrt的结构 与 编写 HelloWorld程序
- openwrt的结构 与 编写 HelloWorld程序
- helloworld程序
- HelloWorld程序
- 微信小程序初体验-helloworld篇
- Helloworld应用程序结构分析
- 微信小程序目录结构
- 微信小程序项目结构
- 微信小程序文件结构
- 微信小程序目录结构
- 微信小程序文件结构
- 微信小程序----项目结构
- 微信小程序 目录结构
- OpenGL的HelloWorld程序
- Android 系列 6.18实现AutoCompleteTextView
- 手机端滚动加载下一页
- Maven的SrpingMVC+Mybatis打包文件不全
- [leetcode]343. Integer Break
- android传感器
- 微信小程序helloworld结构
- xp系统升级win7系统教程
- 人工智能观察
- PS添加文字时候文字特别小
- 我的第一篇博客
- C语言中_exit()、exit()、return区别
- #cmdline_opt.py
- Linux Oracle DB 自动备份shell脚本
- iframe加载完成事件