微信小程序开发(一).docx

《微信小程序开发(一).docx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、“微信”小程序开发(一)第一章开发步骤第1节:小程序构成APP.JSONAPP.JSAPP.WXSS调用函数定义娈量引用接口组成页面窗口参数公共样式第2节:APP.JSON结构{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"WeChat","navigationBarTextStyle":"

2、black"}}Pages:小程序组成页面;Windows:窗口样式设定.第3节:APP.JS结构:App({onLaunch:function(){varlogs=wx.getStorageSync('logs')

3、

4、[]logs.unshift(Date.now())wx.setStorageSync('logs',logs)},getUserInfo:function(cb){varthat=this;if(this.globalData.userInfo){typeofcb=="function"&&cb(this.globalData

5、.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结构.container{height:100%;display:flex;flex-direction:c

6、olumn;align-items:center;justify-content:space-between;padding:200rpx0;box-sizing:border-box;}第5节:页面结构1.页面文件资源结构Page_name.jsonPage_name.wxmlPage_name.jsPage_name.wxss页面配置文件页面主文件页面JS文件页面样式文件2.页面配置文件:page_name.json页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定

7、的页面配置文件，则在该页面直接使用app.json中的默认配置。3.页面主文件:page_name.wxml{{userInfo.nickName}}

8、{{motto}}4.页面JS文件:page_name.jsvarapp=getApp()Page({data:{motto:'HelloWorld',userInfo:{}},bindViewTap:function(){wx.navigateTo({url:'../logs/logs})'},onLoad:function(){varthat=thisapp.getUserInfo(function(use

9、rInfo){that.setData({userInfo:userInfo})})}})5.页面样式文件:page_name.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;}请阅读第二章

10、<<“微信”小程序开发(二)>>