微信小程序开发(一)

第一章 开发步骤 第1节:小程序构成

APP.JSON 组成页面 窗口参数 APP.JS 调用函数 定义娈量 引用接口 APP.WXSS 公共样式 第2节:APP.JSON结构

{ \"pages\":[ \"pages/index/index\ \"pages/logs/logs\" ], \"window\":{ \"backgroundTextStyle\":\"light\ \"navigationBarBackgroundColor\": \"#fff\ \"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) }, 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 } }) 第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.json 页面配置文件 Page_name.wxml 页面主文件 Page_name.js 页面JS文件 Page_name.wxss 页面样式文件 2.页面配置文件:page_name.json

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

3.页面主文件:page_name.wxml

{{userInfo.nickName}} {{motto}} 4.页面JS文件:page_name.js

var 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; }

请阅读第二章<<“微信”小程序开发(二)>>