微信小程序的开发实践

首先这里要感谢Testerhome提供的API, 这里的入门实践主要完成了列表展示。

以下是github的地址：https://github.com/testerhome/weixin_Testerhome

具体的内容展示如下:

这里就说下整个项目实践的过程，可能中间有些不足的地方请谅解。

1. 创建项目

俗话说工欲善其事必先利其器，所以我们首先需要下载微信开发者工具， 接着按照官方的简易教程 进行项目的创建， 不过因为微信开发者工具目前已经支持无appid进行创建项目，所以你可以按照如下的方式即可一目到位：

创建后的界面下图所示：

2. 配置

这里先着重对代码架构目录做介绍：app.js、app.json、app.wxss，这三个中前两个是必看的，前两个相当于目录，就好比你读一本书，都要先看一下目录，所以以后看别人项目的时候，首先先看app.js和app.json
- app.js，它主要是放置一些程序的全局变量、属性或方法以及执行程序的一些生命周期，比如onLaunch(),onShow(),onHide()。当程序一启动的时候就会执行onLaunch()方法，当页面显示的时候执行 onShow()方法，当界面隐藏或转换到后台的时候执行onHide()方法。
- app.json在pages配置所有页面的路径，在window对象里面配置window的样式，在tabBar设置底部tab的样式，在networkTimeOut对象里面配置一些全局超时变量，通过debug赋值是否开启调试模式。
- app.wxss相当于css文件，全局样式，在所有页面都可以调用。

上述说到 app.js是可以设置底部tab的样式的。由于默认创建的模板项目中是不带tabBar的， 所以我们先修改这块的内容。
如下是官方默认的配置。

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

增加tabBar后：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#9B9DB1",
    "selectedColor": "#4342B6",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "资讯"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "话题"
      }
    ]
  }
}

效果图如下：

很明显上面的效果图中还少了图片， 所以我们这里补上

"tabBar": {
    "color": "#9B9DB1",
    "selectedColor": "#4342B6",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tab_main_home.png",
        "selectedIconPath": "images/tab_main_selected_home.png",
        "text": "资讯"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/tab_main_topic.png",
        "selectedIconPath": "images/tab_main_selected_topic.png",
        "text": "话题"
      }
    ]
  }

3. 首页帖子列表展示

1. 注册页面

因为帖子列表界面是一个全新的界面，所以我们需要通过IDE工具去新建一个页面。

我们会发现新建的页面会多出四个文件 topic.js topic.json topic.wxml topic.wxss 我们知道前端都开发都离不开它的三板斧 html css javascript, 所以 topic.js就相当于是js的文件，所以的业务逻辑都是在这里面进行实现， topic.wxml就是html的内容了，只是说里面有一些小程序自己定义的数据绑定的规则， topic.wxss其实就是我们的css样式了，最后剩下多余的topic.json其实跟app.json类似 只是说他能够更加定制化的对本页面的窗口表现进行配置

2. 获取数据

我们通过接口文档 在util文件夹内创建一个api.js文件，专门获取对应的接口URL

var HOST_URI = 'https://testerhome.com/api/v3/';

var GET_TOPICS = 'topics.json';
var GET_TOPIC_BY_ID = 'topics/';

function obj2uri(obj) {
  return Object.keys(obj).map(function (k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
  }).join('&');
}

module.exports = {
  // 获取列表数据
  getTopics: function (obj) {
    return HOST_URI + GET_TOPICS;
  },

  // 获取内容页数据
  getTopicByID: function (id, obj = {}) {
    return HOST_URI + GET_TOPIC_BY_ID + id + '.json?' + obj2uri(obj);
  }
};

topic.js的实现

var Api = require('../../utils/api.js');
Page({
  data: {
    datas: [],
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.fetchData();// 获取数据
  },

  fetchData: function () {
    wx.request({
      url: Api.getTopics(),
      success: function (res) {
        console.log(res);
      }
    });
  },
})

这里主要还修改了部分app.json的页面的配置 这里就不展示了。我们看下效果

说明接口请求已经是ok了，那下来就是如何将数据对应的页面并且展示的问题了。

3.完善列表的展示

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据，WXML 中的动态数据均来自对应 Page 的 data。

如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。
所以我们先对获取到的数据做保存

// pages/topic/topic.js
var Api = require('../../utils/api.js');
Page({
  /**
   * 生命周期函数--监听页面加载
   */
  data: {
    datas: [],
  },

  onLoad: function (options) {
    this.fetchData();// 获取数据
  },

  fetchData: function () {
    const self = this;
    wx.request({
      url: Api.getTopics(),
      success: function (res) {
        // 这里的判断主要是有些图片是需要加http进行网络请求的
        var topices = res.data.topics.map(function (item) {
          if (item.user.avatar_url.indexOf('https://testerhome') !== -1) {
          } else if (item.user.avatar_url.indexOf('testerhome') !== -1) {
            item.user.avatar_url = 'https:' + item.user.avatar_url;
          } else {
            item.user.avatar_url = 'https://testerhome.com/' + item.user.avatar_url;
          }
          return item;
        });
        // 这里就是进行数据的保存了
        self.setData({
          datas: topices
        })
      }
    });
  },
})

这里我们可以通过AppData发现获取到的数据确实已经被赋值进去了。

数据保存了，下来就是如何在wxml中获取到对应的内容了。这里我们需要用到微信小程序文档中提供的列表渲染， 通过wx:for实现列表的渲染。

<scroll-view style="height: 100vh; margin-top: {{listMargin}}px;"scroll-y="true" bindscrolltolower="lower">
    <block wx:for-items="{{datas}}" wx:for-item="item" wx:key="id">
      <view class="posts-list">
        <view id="{{item.id}}" class="posts-item" bindtap="didSelectCell">
          <image class="cellimage" mode="scaleToFill" src="{{item.user.avatar_url}}" />
          <view class="celllabel">
            <text class="celltext">{{item.title}}</text>
            <view class="cellrow">
              <text class="celldetail">{{item.user.name === '' ? item.user.login : item.user.name}}</text>
              <text class="celltip">{{item.created_at}}</text>
            </view>
            <view class="cellrow">
              <text class="celldetail">{{item.node_name === '' ? '暂无' : item.node_name}}</text>
              <view class="replycountBg">
                <text>{{item.replies_count}}</text>

              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>

以上就是wxml的内容了 由于为了方便 所以class中的内容暂时未声明实现，所以我们看到的效果图如下：

嗯 这里剩下的就是wxss的处理了。我们做如下的处理

.posts-list{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #E9EAEB;
}

.posts-item {
  display: flex;
  position: relative;
  flex-direction: row;
  padding: 10px 0 10px 10px;
  font-size: 14px;
  padding-right: 10px;
  background: #fff;
  border-bottom: 1px solid #E9EAEB;
}

.cellimage{
  min-width: 60px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.celllabel {
  flex-direction: column;
  margin-left: 10px;
  text-align: left
}
.celltext{
  color: #1F1F1F;
  font-size: 15px;
  margin-bottom: 10px;
}

.celldetail {
  font-size: 15px;
  max-height: 2em;
  color: #1F1F1F;
  overflow:hidden;
}
.cellrow {
    margin-top: 8px;
    flex-direction: row;
}

.celltip {
    font-size: 12px;
    position:absolute;
    margin-top: 5px;
    right:10px;
    color: grey;
}


.replycountBg {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 10px;
    position:absolute;
    right:10px;
    display:inline-block;
    line-height: 20px;
    text-align: center;
    color: white;
}

.replycount{
    width: 20px;
    line-height: 20px;
    display: block;
    text-align: center;
}

我们再来看下效果图

到这里 整个列表就基本完成了，当然还有一些数据需要完善处理的 比如说上边的时间格式 需要转换一下 等等。

PS 说说测试

回到老本行，对于小程序他与其他web程序等有什么区别呢。
通过IDE source观察 我们大概能够猜想到微信小程序整体由3个部分组成，TopActionBar，中间是一个腾讯自己的WebView，用的应该是腾讯自研的X5内核，下面是一个Bottom ActionBar，在X5 WebView中展示了小程序的内容部分, 所以大部分的展示还是web的内容。所以测试方面跟普通的 Hybrid App的测试其实差异不大。
当然了解下小程序的生命周期还是很有必要的，以及小程序的各个场景值 不过这个还是根据各位的小程序是否需要来确定。

兼容性

微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。
三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：
在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的
在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的

所以各位童鞋一定要告诉开发们不要在pc上面调通了就可以送测了，真正在真机上运行还是有区别的。 ，这里我们测试的时候也是必须要考虑android跟iOS的，关于尺寸方面如果开发童鞋们能够根据微信小程序要求的使用rpx（（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。） 那么问题会少很多的。毕竟本身微信已经替我们做了一层兼容性方面的东西了。

性能

性能 Trace 工具 微信官方已经有很多说明了 这里就不再赘述了。

小窍门

小程序未发布时， 是有个体验版本。正常给到测试的应该也是这个版本的，真正测试通过以后就可以直接对这份代码进行提交审核了。体验版本有个好处就是开启调试工具，里面就可以看到类似于chrome开发者的界面，查看对应的log信息了. 当然正式版本是没有这个开关的。。不过这里发现如果体验版本开启了调试以后，正式版本其实也会开启的。所以这样子我们也可以在正式版本上进行log的查看了。