微信小程序

1.1 技术层面的小程序

 微信小程序 = XML + CSS + JS 的移动应用程序 

1.2 微信小程序结构一览

  新建了一个小程序之后,开发工具为我们默认生成了一些文件,下面我们来看看这些文件都是看些什么用,以及程序结构又是什么样子的。

  (1)项目结构

        

      

(2)应用程序级文件

  ① app.js

      

//app.js
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
  }
})

app.js定义了全局的一些重要事件,比如程序启动时要做些什么,如何获取微信用户信息等等。App函数是一个全局函数,它的作用就是用来创建一个应用程序实例,每个应用程序都会有它的生命周期,因此一些重要的生命周期事件都会在这里定义。例如,onLaunch事件就是程序在启动时需要干什么。

  ② app.json

      

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Manulife WeChat Demo",
    "navigationBarTextStyle":"black"
  }
}

app.json 则定义了程序有哪些页面,以及窗口标题及相关样式等。例如,我们再这里将navigationBarTitleText属性值改为了Manulife WeChat Demo,来看看调试窗口会显示什么?

③ app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

app.wxss 则定义了全局样式,你可以把它理解为一些所有页面公用的css样式。其实,它也就是一个披着wxss后缀名的css3样式表而已。

  (3)具体页面级文件

    ① index.js        

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

每个页面的业务逻辑都会写在各自的js文件中,可以看到index.js中所有的业务逻辑都会写到Page中,而app.js中所有逻辑都写在App中。

  ② index.wxml

     

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="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}}</text>
  </view>
</view>

index.wxml则类似于html为页面定了一个具体的div区域,通过类似于AngularJS的模型绑定将具体的数据绑定到具体的位置。这里再回到index.js中就可以看到原来在index.js中就是为了给这些模型赋值。另外,wxml=>weixin markup language.

 wxml语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法  

 ③ index.wxss

   /**index.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; } 

index.wxss则和app.wxss一样,都是css样式表,只是index.wxss主要针对于index.wxml这个页面,它有明确的作用域。另外,wxss=>weixin style sheet.

  (3)微信小程序总体结构

我们的微信小程序会启动时会生成一个app应用实例,这个app实例会运行多个page,每个page之间又会有一些关联。多个page都需要用到的一些功能则封装到公共方法中,例如util.js,calc.js等等。

3.3 最小化编程体验

  (1)添加一个文件夹test,新建三个页面级文件。

        

2)修改app.json,添加页面设置

  app.json中定义了一个pages数组,每一项代表对应页面的【路径+文件名】信息,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对pages数组进行修改。因此,这里我们将刚刚的test页面假如pages数组,并放到首位。

 "pages":[ "pages/test/test", "pages/index/index", "pages/logs/logs" ] 

(3)编辑test.wxml,添加一句hello world!

  按照国际惯例,每次学习一个新的语言我们都会输出一句hello world!来代表我们的第一个程序,因此这里也不能免俗。

 <text>Hello WeChat Little App!</text> 

  (4)编辑test.wxss,添加一个样式,为刚刚的hello world文本设置为红色字体

      <text class="hello">Hello WeChat Little App!</text>  

       .hello { font-size: 14pt; color:red; } 

   5)编辑app.js,定义一个全局使用的函数getMessage,方法很简单,就不再多说

    App({ // 一些自定义的额外方法 getMessage(para){ var result = "Your name is " + para; return result; }, ... ... } 

   6)编辑test.js,调用全局函数,输出控制台

   

//通过getApp方法获取应用实例
const app = getApp()

Page({
    onLoad(){
        // 在test页面加载时调用全局方法getMessage
        const msg = app.getMessage("Edison");
        // 在控制台输出msg结果
        console.log(msg);
    }
})

 

 (7)编辑test.js,为页面添加一个数据供页面绑定

   Page({ data:{ errorMessage: "User name can not be null!" }, onLoad(){ ... ... } }) 

    <text>Hello WeChat Little App!</text> <text class="hello">{{errorMessage}}</text> 

 

posted @ 2019-04-26 15:24  心泪无恒  阅读(143)  评论(0编辑  收藏