微信小程序开发一.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:black Pages:小程序组成页面;Windows:窗口样式设定.第3节:A

2、PP.JS结构:App( onLaunch: function () 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.getUserInf

3、o( success: function (res) that.globalData.userInfo = res.userInfo; typeof cb = function & cb(that.globalData.userInfo) ) ); , globalData: userInfo:null )第4节:APP.WXSS结构.container height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx

4、 0; box-sizing: border-box;第5节:页面结构1.页面文件资源结构Page_name.jsonPage_name.wxmlPage_name.jsPage_name.wxss页面配置文件页面主文件页面JS文件页面样式文件2.页面配置文件:page_name.json页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。3.页面主文件:page_name.wxml userInfo.nickName motto 4.页面JS文

5、件:page_name.jsvar app = getApp()Page( data: motto: Hello World, userInfo: , bindViewTap: function() wx.navigateTo(url: ./logs/logs) , onLoad: function () var that = this app.getUserInfo(function(userInfo) 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;请阅读第二章