微信小程序初探

从Android开发者角度来学习一下微信小程序

作为一名Android开发者，了解一下竞品小程序个人认为还是有必要的，当然，这里只是聊聊微信小程序，至于支付宝小程序，我大致的浏览了下官网，发现和微信的大同小异，相同的方面还是挺多的，就没有仔细的看，所以这里只说微信的。因为许多公司已经开始做自己的小程序了，包括我们公司也是，在前一段时间，学习了下小程序，这里对小程序学习进行一下简单的总结与分享。

首先，介绍一下我们学习的途径，当然就是我们的微信小程序的官网了。

https://developers.weixin.qq.com/miniprogram/dev/

至于注册、申请账号获取AppId什么的就略过，这些基本开发人员都知道，按照要求一步步来就好了，当然也可以先不注册直接开发一个测试的小程序看看效果。然后就是下载微信的开发者工具了，安装完成后，直接打开，进入这样一个页面。

看来需要我们先进行登录， 此时打开微信扫一扫，在手机上确认下，就会进入这个页面

可以看到，这个工具可以开发小程序与公众号，我们选择小程序， 就进入到我们的最后一个页面了。

可以看到，这让我们设置自己小程序项目的目录以及名称还有自己申请的AppID，这里因为没申请APPID，所以先使用测试号，都填完之后，点击确定，就真正进入我们开发工具的页面了，如图所示。

顶部是项目的一些设置信息，左边是页面的实时预览效果，右边是代码部分，下面的输出的log信息，这里，我们主要看一下代码，可以看到，最外层，包含两个文件夹pages和utils和四个文件app.js 、app.json 、app.wxss 、project.config.json，其中这四个文件是必须放在项目的根目录下的。

app.js配合着官方文档，我们可以知道，这个是js文件是用来写小程序逻辑部分的，我们项目的代码中也可以看出一部分。

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

简单的看一下js文件，有个onLaunch函数，在查询小程序文档发现这个和我们Android中的Application相似，都是在启动的时候会调用一次，然后还有onShow、onHide、onError、onPageNotFound等方法，分别对应小程序生命周期相对应的方法。这里需要注意一下，onLaunch(Object)是可以传入参数的，只不过在这里省略了而已，我们如果传参数了需要把这个Objec写在方法里获取。字段如下，紧接着，在初始化的时候获取了本地存储的logs信息，然后又保存了新的日志信息，同时，调用一些微信的API获取到用户信息，这也就解释了开发者工具上会出现我们微信头像的原因。js文件最下面有一个globalData对象，默认的userInfo字段为null，在获取到用户信息之后，通过this.globalData.userInfo = res.userInfo对userInfo赋值。

接下来是app.json文件，打开该文件如图：可以看到，里面有pages,对应一个数组，以及其中pages代表我们pages文件夹下的页面路径，每个新建的页面都必须在这里注册，填上新建的页面路径，这样才可以被访问到，这和我们的AndroidManifest有点像，所有的Activity都必须在AndroidManifest文件里注册，然后下面的一个window对象，里面有一些字段，可以推测出是设置全局默认窗口的基本属性，如背景文字颜色，导航栏背景颜色，导航栏文字颜色等，当然可以设置的有许多，我们可以把navigationBarTitleText修改看一看，然后保存，就可以实时看到保存之后的效果。

接下来是app.wxss，了解过css的应该可以推测出，这是配置的一些公用的样式，我就不多说明，因为我学的也不咋样。

最后是project.config.json，这个页面是用来设置项目的工具配置信息的，如下：分别设置了打包配置选项，项目设置，是否检查url,小程序中所有链接的地址都必须是HTTPS的，是否使用是否启用 es6 转 es5及代码压缩什么的，也不过多介绍，官网介绍的挺详细。

说完项目的配置信息，接下来我们打开pages文件夹，看到有两个子目录，为index和log，分别展开，看到下面又有四个文件，分别是index.js index.json index.wxml index.wxss，不难得出，index代表就是我们项目的的主页面，.js 写的就是页面的逻辑，.json可以对窗口进行配置，.wxml则主要写我们的页面布局，.wxss写页面的样式，其中页面的json配置项会覆盖app.json的配置项。

 

我们分析一下index.js文件，打开可以看到最上面注释const app = getApp()获取到应用的事例，和我们的getApplication很像，然后一个Page()对象，里面写了data数据对象，bindViewTap事件处理函数，onLoad页面生命周期对象，以及getUserInfo方法，其中data对象中定义了几个属性并初始化，如motto、userInfo等，然后在事件处理函数中调用了

wx.navigateTo({
      url: '../logs/logs'
    })

 这个方法，查相关开发文档发现这是跳转页面的方法，直接传入json对象，url对应的为该页面的路径。

然后在onLoad的时候进行了一个判断，如果获取到用户信息，通过 setData方法对data中一些属性进行了赋值操作，比如设置了userInfo及是否获取到hasuserInfo为true

打开index.json发现是个空的json对象，可见该index页面的配置在app.json中用上了，因为就没有再写，当然我们如果想自己写也是可以的，会覆盖app.json中的设置

打开wxml，可以看到该布局代码：

        一些view，image、button组件的基本用法这里不讲，我们只简单的看一下里面的逻辑，在button里面有一个逻辑判断，如果!hasUserInfo&&canIUse的话，button就会显示获取头像昵称，else则会设置image和text，这也就是为什么我们页面刷新的时候会先出来一个获取用户昵称，再出现自己的头像及昵称，因为这涉及到获取个人信息的过程，在获取到之后，重新setData就会显示头像了,text组件中的文本设置使用的{{userInfo.nickName}}，这种方式是不是和我们Android里面的DataBinding很像，可以在xml文件中直接将对应的数据写上来，直接渲染就可以了，做到逻辑与页面分离，其中的userInfo对象就是我们在js中定义的data中的userInfo对象，image组件有个bindtap，查阅资料发现这是view的点击事件，对应的是点击事件的方法名称，方法写在js文件里面，如上所示，我们点击头像，会跳转到logs页面。

至于wxss，因为我也就了解部分，h5同事的话应该对这比较熟悉，可以简单的介绍一下，.userinfo是一个类选择器，里面写着该view的一些对齐方式宽高颜色等基本属性，其他的就不过多介绍了。

现在，我们可以在pages目录下新建一个目录，就叫home，试试，可以看到在pages目录下多出了一个home文件夹，展开里面是空的，然后我们新建page，可以看到工具自动给我们创建了home.js  home.json home.wxml home.wxss四个文件，而且，在app.json文件中，我们可以看到在pages里面工具已经自动为我们添加了页面的路径配置，因此，我们在编写代码的时候一定要注意下不要去修改文件的名称，这些都是固定的，修改后可能会出现问题 。

 

             我们可以在简单的做一下页面之间的跳转，仿照着点击头像跳转到log页面，首先，我们在logs.wxml中给每一条log设置点击事件，给text添加bindtap="bindLogTap"，然后在logs.js中写出这个方法，其实和android中的onClick简直一模一样，onClick也可以直接写在xml中，然后在activity里面实现就好了。然后在logs.js方法中写具体的跳转逻辑，很简单，就是调用微信的api，wx.navigateTo({url: '../home/home'})就可以了，接下来我们保存，然后试一下点击，就可以看到跳转了。这个时候问题来了，我们跳转页面如果想传递参数怎么办，就需要我们查阅微信官方文档了。

             可以看到，我们可以把要携带的参数拼接到url后面，然后在目标页面接收的话，之前说过，在页面的生命周期的初始化方法中，我们可以有一个参数，如果要通过参数获取数据的话，就要用到这个参数了，我们现在修改一下代码，传递名字过来

  bindLogTap :function (){
    wx.navigateTo({
      url: '../home/home?data=xwy'
    })
  }

            然后在目标页面的onLoad方法里 先把他打印出来，然后通过setData的方式设置进去。

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      name:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      console.log(options)
      this.setData({
        name:options.data
      })
  },
//部分代码省略

 

可以看到，以及打印出我们传入的对象及字段了，然后在home.wxml中给text设置值

 

最终的效果如下

之所以顶部也有XWY是因为我们在app.json里面写死了顶部的文字，所以出现了这样的效果，当然也可以在home.json里面修改，就不做修改了。

logs页面其实和index里面大同小异，就不再展开看了，接下来我们看下最后的utils文件夹下的内容，展开发现只有一个文件util.js，顾名思义，这个是一个工具类提供给其他页面使用，看看里面的具体的代码

虽然一些语法我们不懂，但是作为一名开发人员，代码实现了怎样的逻辑我们还是看得懂的，很简单，就是提供了一个格式化日期的方法，最下面通过module.exports导出，我们看看官方文档，找到模块化。

可以看到，这一部分还是写的比较详细的，我们一些公用的代码单独抽离为一个js文件，但是，只有通过module.exports（推荐）或者export暴露出去外部才能使用。使用就是module.exports.要导出给别人用的方法名（可自定义） = 该类中的方法名，当然也可以传一个对象，如module.exports={ xxx:xxx,xxx:xxx  }，在某个页面的js文件中若需要使用到这个方法，则需要通过require(文件路径)，比如logs.js使用到了，则需要如下使用：

这里官网给了我们一个小tips:   require 暂时不支持绝对路径  目前只能写相对路径，就可以直接调用该工具类中的方法了。

最后，来总结一下看到的微信小程序的要求。

1.同一个微信用户，同一个小程序 storage 上限为 10MB

2.小程序的域名只支持https和wss（connectSocket）协议

3.小程序包体积有限制   单个分包/主包大小不能超过 2M   整个小程序所有分包大小不超过 8M