7-2 微信小程序入门篇 准备篇 1.登录网址,https://mp.weixin.qq.com 注册一个微信小程序。 2.获取微信小程序appid,登录自己的小程序后台,在开发者设置中获得appid。 3.下载微信开发者工具,创建项目。输入appid,和项目名即可。 4.js是脚本文件, json是配置文件,wxss是样式表文件。小程序读取这些文件,生成小程序实列。 5.app.js是小程序的脚本代码,儿科与你监听并处理小程序的生命周期,声明全局变量。 调用框架提供丰富的API 案列,调用同步存储服务和同步读取本地数据。 APP({ onLaunch:function(){ //调用API从本地缓存中获取数据 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 } }) 6.app.json是对整个小程序的全局配置,页面组成,窗口背景色,导航条样式,默认标题等。 这个文件不可添加任何注释。 { "pages":[ "pages/index/inex", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#fff", "navigationBarTitleText":"haha", "navigationBarTextStyle":"black" } } 7.wxss是整个小程序的公共样式表。可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。 .container{ height:100%; display:flex; flex-direction:column; } 8.页面? 每个页面都要写在app.json的pages中,第一个页面时小程序的首页。 每个页面是由同路径下同名的四个不同后缀文件的组成。 index.js 页面的脚本文件,监听处理页面的生命周期函数,获取实列,声明并处理数据。响应页面交互事件。 // 获取应用实列 var app = getApp() onLoad:function(){ console.log('onLoad') var that = this //调用应用实列的方法获取全局数据 app.getUserInfo(function(userinfo)){ //更新数据 that.setData({ userInfo:userInfo }) } } index.wxml 页面结构文件。 index.wxss 页面的样式规则会覆盖app.wxss中的样式规则。 index.json 页面的配置项会覆盖app.json中的相同配置项。