微信小程序开发(一)

“微信”小程序开发(一)第一章开发步骤第1节:小程序构成第2节:APP.JSON结构Pages:小程序组成页面;Windows:窗口样式设定.{pages:[pages/index/index,pages/logs/logs],window:{backgroundTextStyle:light,navigationBarBackgroundColor:#fff,navigationBarTitleText:WeChat,navigationBarTextStyle:black}}APP.JSONAPP.JSAPP.WXSS调用函数定义娈量引用接口组成页面窗口参数公共样式第3节:APP.JS结构:App({onLaunch:function(){varlogs=wx.getStorageSync('logs')||[]logs.unshift(Date.now())wx.setStorageSync('logs',logs)},getUserInfo:function(cb){varthat=this;if(this.globalData.userInfo){typeofcb==function&&cb(this.globalData.userInfo)}else{wx.login({success:function(){wx.getUserInfo({success:function(res){that.globalData.userInfo=res.userInfo;typeofcb==function&&cb(that.globalData.userInfo)}})}});}},globalData:{userInfo:null}})第4节:APP.WXSS结构第5节:页面结构1.页面文件资源结构2.页面配置文件:page_name.json页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置。3.页面主文件:page_name.wxmlPage_name.jsonPage_name.wxmlPage_name.jsPage_name.wxss页面配置文件页面主文件页面JS文件页面样式文件.container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:200rpx0;box-sizing:border-box;}4.页面JS文件:page_name.js5.页面样式文件:page_name.wxssvarapp=getApp()Page({data:{motto:'HelloWorld',userInfo:{}},bindViewTap:function(){wx.navigateTo({url:'../logs/logs})'},onLoad:function(){varthat=thisapp.getUserInfo(function(userInfo){that.setData({userInfo:userInfo})})}})viewclass=containerviewbindtap=bindViewTapclass=userinfoimageclass=userinfo-avatarsrc={{userInfo.avatarUrl}}background-size=cover/imagetextclass=userinfo-nickname{{userInfo.nickName}}/text/viewviewclass=usermottotextclass=user-motto{{motto}}/text/view/view请阅读第二章“微信”小程序开发(二).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;}