首页 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践 » 微信公众平台开发:从零基础到ThinkPHP5高性能框架实践全文在线阅读

《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》21.1.3 编写代码

关灯直达底部

1)创建小程序实例。

点击开发者工具左侧导航栏中的“编辑”,可以看到这个项目已经初始化并包含了一些简单的代码文件。最关键也必不可少的是app.js、app.json、app.wxss等3个文件。其中,.js是脚本文件,.json是配置文件,.wxss是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

app.js是小程序的脚本代码。用户可以在这个文件中监听并处理小程序的生命周期函数,声明全局变量,调用框架提供的丰富的API,如这里的同步存储及同步读取本地数据。

app.js的初始代码如下。


 1 // app.js 2 App({ 3     onLaunch: function  { 4         // 调用API从本地缓存中获取数据 5         var logs = wx.getStorageSync('logs') ||  6         logs.unshift(Date.now) 7         wx.setStorageSync('logs', logs) 8     }, 9     getUserInfo:function(cb){10         var that = this11         if(this.globalData.userInfo){12             typeof cb == "function" && cb(this.globalData.userInfo)13         }else{14             // 调用登录接口15             wx.login({16                 success: function  {17                     wx.getUserInfo({18                         success: function (res) {19                             that.globalData.userInfo = res.userInfo20                             typeof cb == "function" && cb(that.globalData.userInfo)21                         }22                     })23                 }24             })25         }26     },27      globalData:{28         userInfo:null29     }30 })  

app.json是对整个小程序的全局配置。用户可以在这个文件中配置小程序由哪些页面组成,配置小程序的窗口背景色,配置导航栏样式,配置默认标题。注意,该文件不可添加任何注释。


 1 { 2     "pages":[ 3         "pages/index/index", 4         "pages/logs/logs" 5     ], 6     "window":{ 7         "backgroundTextStyle":"light", 8         "navigationBarBackgroundColor": "#fff", 9         "navigationBarTitleText": "WeChat",10         "navigationBarTextStyle":"black"11     }12 }  

app.wxss是整个小程序的公共样式表。用户可以在页面组件的class属性上直接使用app.wxss中声明的样式规则。


 1 /**app.wxss**/ 2 .container { 3     height: 100%; 4     display: flex; 5     flex-direction: column; 6     align-items: center; 7     justify-content: space-between; 8     padding: 200rpx 0; 9     box-sizing: border-box;10 }   

2)创建页面。

在官方的Demo中有两个页面,index页面和logs页面,即欢迎页和小程序启动日志的展示页,它们都位于pages目录下。微信小程序中每一个页面的“路径+页面名”都需要写在app.json的pages中,且pages中的第一个页面是小程序的首页。

每一个小程序页面是由同路径下同名的4个不同扩展名的文件组成的,如index.js、index.wxml、index.wxss、index.json。

index.wxml是页面的结构文件,其代码如下。


 1 <!--index.wxml--> 2 <view> 3     <view  bindtap="bindViewTap"> 4         <image src="{{userInfo.avatarUrl}}" background-      size="cover"></ image> 5         <text>{{userInfo.nickName}}</text> 6     </view> 7     <view> 8         <text>{{motto}}</text> 9     </view>10 </view>  

这里使用了<view/>、<image/>、<text/>来搭建页面结构,绑定数据和交互处理函数。

index.js是页面的脚本文件。在这个文件中,可以监听并处理页面的生命周期函数,获取小程序实例,声明并处理数据,响应页面交互事件等。index.js的代码如下。


 1 // index.js 2 // 获取应用实例 3 var app = getApp 4 Page({ 5     data: { 6         motto: 'Hello World', 7         userInfo: {} 8     }, 9     // 事件处理函数10     bindViewTap: function {11         wx.navigateTo({12             url: '../logs/logs'13         })14     },15     onLoad: function  {16         console.log('onLoad')17         var that = this18         // 调用应用实例的方法获取全局数据19         app.getUserInfo(function(userInfo){20             // 更新数据21             that.setData({22                 userInfo:userInfo23             })24         })25     }26 })  

index.wxss是页面的样式表,其代码如下。页面的样式表是非必要的。当有页面样式表时,页面样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。它们之间类似于一种继承关系。


 1 /**index.wxss**/ 2 .userinfo { 3     display: flex; 4     flex-direction: column; 5     align-items: center; 6 } 7  8 .userinfo-avatar { 9     width: 128rpx;10     height: 128rpx;11     margin: 20rpx;12     border-radius: 50%;13 }14 15 .userinfo-nickname {16     color: #aaa;17 }18 19 .usermotto {20     margin-top: 200px;21 } 

index.json是页面的配置文件。在官方的例子中,这个页面没有配置文件,不过日志页面有这个相应的页面配置文件。页面配置文件是非必要的。当有页面配置文件时,配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用app.json中的默认配置。

logs的页面配置文件代码如下。这里配置了导航栏的标题文本内容。


<!--log.json-->{    "navigationBarTitleText": "查看启动日志"}  

logs的页面结构代码如下。


1 <!--logs.wxml-->2 <view>3     <block wx:for="{{logs}}" wx:for-item="log">4         <text>{{index + 1}}. {{log}}</text>5     </block>6 </view>  

logs页面使用<block/>标签来组织代码,在<block/>上使用wx:for绑定logs数据,并将logs数据循环展开节点。

logs的页面脚本文件代码如下。


 1 // logs.js 2 var util = require('../../utils/util.js') 3 Page({ 4     data: { 5         logs:  6     }, 7     onLoad: function  { 8         this.setData({ 9             logs: (wx.getStorageSync('logs') || ).map(function (log) {10                 return util.formatTime(new Date(log))11             })12         })13     }14 })  

在这个文件中,程序读取存储的日志信息并在打开页面的时候将其加载出来,同时日期用格式化的形式展示出来。