初尝微信小程序开发与实践经验分享

一个java程序员最游手好闲的一次分享了。

小程序的火热相信不用我多说了，年初的时候老婆去浦东某达面试，甚至都被问有没有小程序测试经验。俨然小程序成为了互联网公司自PC，WAP，安卓，IOS以后又一不可或缺的入口。正好这段时间公司也在作一款小程序，因而顺便也学习了一把。固然由于我是一个javaer，天然是之后端的视角来谈谈，和前端的同窗确定仍是比不上的。

学习小程序，我认为对于后端同窗仍是比较有优点的，由于后端同窗对于HTML，CSS以及JS这些前端基本知识仍是有所涉猎的，而前端的同窗对于后端可能就没那么了解了。接下来，以个人实践经从来简单聊一聊小程序，算是总结也算是个分享。

小程序用来作什么？

“触手可及”，“用完即走”。感受这两个词把小程序的特色描述的真的是淋漓尽致。以微信的用户量，小程序免去了用户还需安装APP的繁琐。并且用完以后，无需刻意退出，直接离开便可，当下次某个时间点在想起来，从新翻出来就好了。这对不少行业来讲多是颠覆性的。以我我的的观点来看，小程序适合作一些业务简单，性能要求不高，使用频率相对较低的应用。好比像垂直电商行业就是典型的受益者，自媒体电商，生鲜电商，若是让用户去下载一个这样的APP成本是很大的，而使用小程序确悄然的避免了拉新客的难题。又好比我本身，若是我把本身的博客作成了一个APP，相信几乎不会有同窗去下载，而使用小程序却偶尔还会有些同窗会点进来看看的，哈哈。

入门小程序

首先开发小程序，须要一个专门的工具【微信开发者工具】，这个你们能够直接到微信公众平台下载。

接下来咱们首先新建个快速启动模板看一下，若是你有注册帐号有appid的能够填入，没有的话也不要紧。点击图中小程序便可使用测试帐号。

如上图，进入后便可看到这些文件。

能够说一个简单的小程序只有这些了。

• app.js 主要是全局公共的js方法声明及调用所在的文件
• app.json 是小程序全局的配置文件，因此有的页面都在要此注册，否则不容许访问
• app.wxss 是小程序全局的css文件
• pages下是对应着全部页面，每一个页面，能够添加四种类型的文件，.json，.wxss，.wxml，.js

另外在说下这四种类型的文件，小程序pages下面基本上每一个文件夹至关于一个页面，每一个文件夹下面有四种命名相同但类型不一样的文件，这四种构成了页面的所有。

• .json 后缀的 JSON 配置文件
• .wxml 后缀的 WXML 模板文件，相似web开发的html
• .wxss 后缀的 WXSS 样式文件，相似web开发的css
• .js 后缀的 JS 脚本逻辑文件，它就是一个js啊，不太小程序的js不能操做dom，是基于数据绑定的哦

而后咱们在看下js文件的构成，注释很清晰：

Page({

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

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动做
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})复制代码

了解了这些基本上小程序开发就没问题了，其余就剩翻文档了。这里我建议把文档当成字典来读，读完简易教程和框架后，其余须要什么来查什么就好了，不必像教科书同样一字不落的全看完。

由于微信开发者工具还比较初始，以前每建一个页面，我都是先建一个文件夹，而后在分别把四个文件建好。这里我介绍个小技巧，你们能够首先将要新建的页面注册进app.json，这时候工具会自动把文件夹和四种文件给你建好。说实话很奇怪，这种方法在官方文档上我并无看到，不知道是我眼花仍是官方真的没有写。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}复制代码

再说下页面的注册，当咱们在app.json文件中注册的时候，【pages/index/index】会将该页面下index.xx的四种文件加载进来，而没必要一个个写了。还有就是文件夹名字和文件名是能够不一样的，好比【pages/index/launch】会将index文件夹下全部的launch文件加载。可是建议仍是同样把，否则看着挺别扭的。

最后在多说句，小程序的域名白名单问题，我发现不少同窗不知道，包括身边的同事，一直还在用内网穿透来开发。

首先小程序对应用请求的域名是有限制的。

1. 请求的域名必须在后台配置，非配置域名没法请求成功。
2. 域名协议必须是https的，若是是http请求也是会失败的

固然，这是对线上版原本说。若是是咱们本地开发，小程序提供了一个很人性化的功能。能够忽略这个限制，甚至你能够直接请求本地的IP地址+端口号，而没必要使用繁琐的内网穿透的方式了。

具体操做方式就是在微信开发者工具中，点击【设置】-【项目设置】-【勾选】不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 便可，以下图

下面就结合个人实践小程序来简单聊一聊，更多的资料你们能够查阅文档

开源实践

恰巧前段时间作了个练手的yyblog的开源项目，此次就拿这个项目作个简单的小程序客户端了。仍是惯例，你们先看下效果图吧。

单纯的html,css,js实现，没有应用任何前端框架，仍是比较适合参考学习的。ppps：反正我是不会说由于我不会才不用的 呜呜~~~流下了没有技术的泪水┭┮﹏┭┮。

微信小程序总的来讲虽然已经上线那么久，但和传统意义上的开发语言上比，还不是那么稳定的，官方也在不断的调整中。

相信不少同窗有遇到过这样的场景，当你第一次进入一个小程序的时候，会弹出来一个用户信息受权的弹窗。刚开始我写的时候也是这样处理的，可是后来在上传代码的时候看到，微信在9月12号的时候发了一个公告。

主要是取消了分享监听接口的回调，将获取用户信息的getUserInfo接口改成只有用户点击了相关受权组件才能触发，还有就是openSetting接口也改成了点击才能触发。因此作微信小程序开发仍是要作关注下官方的动态，以避免作好的功能确不能正常使用的尴尬。

全局配置

前面有说app.xx的相关文件，是小程序的全局配置文件，这里在单独说下app.js这个文件。当咱们某些参数是全局须要的时候，咱们就能够将相关的参数写在这个文件里面，好比咱们请求的基础url，亦或是用户信息，用户ID这种请求必须携带的参数。同时咱们能够将版本校验的代码写在这里，这里在多说一句，微信是支持版本校验的，当有新的版本代码的时候，能够作用户更新提示，这里再也不须要咱们后台校验，仍是比较方便的。相关的代码以下：

App({

  onLaunch() {
    this.checkUpdate();
  },

  globalData: {
    userInfo: {},
    apiBase: "https://www.laoyeye.net",
    userId: ""
  },

  checkUpdate() {
    const updateManager = wx.getUpdateManager();
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
      console.log(res.hasUpdate)
    })
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success: function (res) {
          if (res.confirm) {
            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
            updateManager.applyUpdate()
          }
        }
      })
    })

    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
      console.log('更新失败！')
    })
  }
})复制代码

启动页

用户在刚开始进入小程序的时候，首先会展示一个启动页。起初我也不是这样设计的，基本上是用户进入后直接进入主页，弹出用户受权就好了，可是由于9.12的调整，也不得不做出了修改。让用户首先进入启动页受权，受权后跳转到主页。已受权的用户就把受权按钮隐藏，而后在等待1.5s后跳转到主页。这个过程当中我除了作了获取用户受权的操做以外，还请求后台服务器在后台建立了用户数据，最终将userId返回到小程序。之后用户作评论，点赞，收藏等操做，均会携带userId，方便区分具体的用户。

这个页面其实有两个比较重要的知识要点，这里特别强调下。

首先，咱们须要获取每一个用户对于当前应用的openId，以便下次用户访问时，避免再次受权的重复操做。

调用wx.login()接口获取登陆凭证（code）进而换取用户登陆态信息，包括用户的惟一标识（openid） 及本次登陆的 会话密钥（session_key）等。可是须要注意的是，用code去换取openid的操做，须要在服务端后台来作，若是在小程序js上交换，在开发版本你会看到也是能够正常获取登陆，可是到生产上就不行了，由于小程序的安全限制，官方的域名是没法设置到白名单里。

代码以下：

login(auth) {
    let that = this;
    //调用微信登陆接口
    wx.login({
      success: function(res) {
        wx.request({
          url: app.globalData.apiBase + '/api/wx/login?code=' + res.code + '&nickname=' + app.globalData.userInfo.nickName +
            '&avatar=' + app.globalData.userInfo.avatarUrl,
          header: {
            'content-type': 'application/json'
          },
          success: function(res) {
            //userId
            if (res.data.code == 200) {
              app.globalData.userId = res.data.data;
              console.log('获取用户信息=' + res.data.data);
              if (auth == 'auth') {
                that.direct();
              } else {
                let timer = setTimeout(() => {
                  clearTimeout(timer)
                  that.direct()
                }, 1500)
              }
            }
          }
        })
      }
    })
  },复制代码

第二，就是getUserInfo这个接口了，由于新规定的限制，以往若是用户没有受权，是会弹出受权的弹窗的。可是新规定以后若是你调用这个接口是在用户没有受权的状况下，那么会直接进入fail失败的回调的。因此你必须经过组件获取用户的受权，而后在用户点击的回调里在调用这个方法。

代码以下：

<button class="show-btn" wx:if="{{userInfo.length == 0}}" type="primary" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo"> 受权登陆 </button>复制代码

onGetUserInfo() {
    var that = this;
    wx.getSetting({
      success: function(res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function(res) {
              app.globalData.userInfo = res.userInfo;
              that.login('auth');
            },
            fail: function() {
              console.log('系统错误')
            }
          })
        } else {
          wx.showToast({
            title: "受权失败",
            duration: 1000,
            icon: "none"
          })
        }
      },
      fail: function() {
        console.log('获取用户信息失败');
      }
    })
  },复制代码

最后，这里在讲个小问题，我不知道是否是我我的的问题，我在作页面数据赋值的时候，会使用

this.data.requestUrl = requestUrl;

或者

this.setData({

postList: totalData

});

的方法。若是是异步状况下，必须使用方法二，页面上才能取到数据。可是有些状况下非异步方法里使用方法一数据居然取不出来，但是我在断点中明明看到数据是赋值成功的啊。而这个时候换成方法二却又成功了。真的是不明因此，你们尽可能使用方法二吧。

主页、技术页

把这两个页面一块儿讲，缘由就是两个页面虽然展示形式上不一样，可是技术特色上仍是想同的。惟一的区别，可能就是后期我会把两个页面的数据接口作个调整，请求不一样的数据了。

这个页面主要是两个知识点，上拉加载更多和下拉刷新了。

首先是上滑加载更多数据，这个实际上是小程序官方提供的一个onReachBottom的方法，只要用户上滑到必定距离就会触发，这里我作了分页的处理。首次进入展现五条数据，当触发事件后请求第二页的数据。固然请求到第二页的数据并不能覆盖以前的数据哦，否则当用户在下滑时，刚才的数据没了，是不符合用户习惯的。

上滑事件触发的距离也是能够经过onReachBottomDistance实现的，默认50px

具体实现的代码以下：

// 上滑加载更多数据
  onReachBottom: function (event) {
    var nextUrl = this.data.requestUrl +
      "?page=" + this.data.page + "&limit=5";
    util.ajax(nextUrl, "get", null, this.processData)
    wx.showNavigationBarLoading()
  },复制代码

processData: function (indexData) {
    var totalData = {};
    //若是要绑定新加载的数据，那么须要同旧有的数据合并在一块儿
    if (!this.data.isEmpty) {
      totalData = this.data.postList.concat(indexData);
    }
    else {
      totalData = indexData;
      this.data.isEmpty = false;
    }
    this.setData({
      postList: totalData
    });

    this.data.page += 1;
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh();
  },复制代码

而后是下拉刷新，下拉刷新默认是不开启的，须要咱们在*.json配置中经过enablePullDownRefresh属性开启，默认为false。

若是在app.json中设置为全局开启下拉刷新，在具体页面中即为当前页面开启。

相关代码以下：

{
  "navigationBarTitleText":"小卖铺的老爷爷",
  "enablePullDownRefresh": true
}复制代码

onPullDownRefresh: function (event) {
    var refreshUrl = this.data.requestUrl +
      "?page=0&limit=5";
    this.data.techList = {};
    this.data.isEmpty = true;
    this.data.page = 1;
    util.ajax(refreshUrl, "get", null, this.processData);
    wx.showNavigationBarLoading();
  },复制代码

其实这两种方法，在你们看官方文档全局配置的时候就会看到的。上面我也有说过学习小程序，官方文档的简易教程和框架仍是必看的，其余的就没那么重要了。

详情页

详情页其实就一个要讲，富文本的解析。

由于微信小程序并不支持html语言，因此须要转换为微信支持的wxml。

总的来讲微信对富文本的支持并很差，官方也没什么好用的富文本解析组件。此次我使用的是github上关注度最高的小程序富文本组件wxParse ，虽然说相对比较完善了，BUG仍是很多的，并且做者好像也不维护了。可是目前实在没有找到其余什么好的替代方案，只能用这个了。若是你们还有其余组件，能够告诉我一下哈。

wxParse 的使用，项目上已经讲的很清楚了，你们方即可以移步：https://github.com/icindy/wxParse 查看。

我这边对wxParse作了一些小改动，主要解决部分手机报错没法解析的问题。缘由是微信小程序不支持console.dir()的写法，这个小程序官方也有在社区说明。

分享

当你在页面的js文件中，定义了onShareAppMessage函数，这时候页面便拥有了分享功能，能够转发给微信好友。

/**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.data.postData.title,
      path: '/pages/post-detail/post-detail?id=' + this.data.id + "&title=" + '小卖铺的老爷爷' + "&share=1" 
    }
  },复制代码

如上，是个人分享代码，设置了分享的标题，以及跳转的路径等。这里我对路径作了参数处理，以便我能区分出用户的来源。为何要区分用户来源呢，由于小程序的分享页面进入后有个很奇怪的问题，没有返回主页的按钮。因此我这边单独作了区分，当用户来自分享时，显示一个悬浮的返回首页的图标。

相关代码以下：

<!-- 回到首页(分享的时候显示) -->
<image wx:if="{{share}}" bindtap='onBackHome' class='back-home' src='/images/icon/home-page.png' lazy-load></image>复制代码

/**
  * 回到首页(分享的时候)
  */
  onBackHome: function () {
    wx.reLaunch({
      url: '/pages/launch/launch?share=1"'
    })
  }复制代码

个人

最后在说说个人这个页面，其实这个页面没啥重要的东西。只是静态页面的跳转。

我的信息后期我会作成可绑定PC端帐户的形式。

个人收藏是已经实现过的，只是可能详情页尚未具体收藏的入口，后期我会加上。具体的效果图以下。

还有一个就是打赏赞助这个页面，刚开始是准备作成小程序间关联，使用给赞api的接入方式。可是最近小程序官方对多个小程序间的跳转也要增长限制，就懒得弄了。

直接作了个详情页的跳转，详情页面贴了张赞扬码完事。须要注意的是小程序页面并不支持直接长按扫描哦，须要点击下图片，在弹出的图片上在长按识别图中的二维码。

ppps：写完文章后才想起来这个页面忘记说一个东西。小程序是可使用阿里icon库的，具体使用方法你们网上看看吧。不说了，有兴趣的也能够看下我源码中的实现。

最后的最后

附上小程序微信预览地址：

以前有说这个项目是基于我前面的开源项目yyblog来写的，因此项目的PC端是已经完成的。全部请求的接口均已在yyblog实现。

小程序的源码也已在yyblog中上传，具体地址在：github.com/allanzhuo/y…

若是本文对您有帮助，或者项目能对您有所启发的话，但愿帮忙给yyblog项目点个Star吧，github.com/allanzhuo/y…

篇幅有限，写得有点长了，就到这里吧。总的来讲技术难度不大，可是小坑仍是比较多的。若是您有什么想法欢迎在评论中与我交流，码字不易，记得帮忙点个Star哦~