微信小程序开发(一)

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

2、 "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" Pages:小程序组成页面;Windows:窗口样式设定.第3节:APP.JS结构:App( onLaunch: function () var logs = wx.getStorageSync('logs') | logs.unshift(Date.now() wx.setStorageSync('logs', logs) , getUserI

3、nfo: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(

4、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 0; box-sizing: border-box;第5节:页面结构1.页面文件资源结构Page_name.jsonPage_name.wxmlPage_name.jsPage_name

5、.wxss页面配置文件页面主文件页面JS文件页面样式文件2.页面配置文件:page_name.json页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会掩盖 app.json 的 window 中相同的配置项。假如没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。3.页面主文件:page_name.wxml<view class="container"> <view bindtap="bindViewTap" class="userinfo"> <imageclas

6、s="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<

7、/text> </view></view>4.页面JS文件: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;