Nodejs下微信网页开发教程(二)

续上一篇文章Nodejs下微信网页开发教程(一)

4.2、配置SDK

因为本demo使用的是服务器端渲染模板引擎，所以在将文件发给客户端之前我们应该获取到JSSDK使用步骤中wx.config指定的参数：

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

完成这个目标的是在server/helper/weixinSignature.js，该文件返回一个promise,然后在toController.js中使用下面的代码：

    Promise.all([
      request.getCityList(),
      getSignature(`${config.domain}/index`)
    ])
    .then((result) => {
      console.log(result[1])
      res.render('index.pug', {
        appId: config.appId,
        weixin: result[1],
        lists: result[0],
        nickname: data[0].nickname,
        openid: data[0].openid
      })
    }).catch((err) => {
      console.error('Promise Error: ', err)
      res.render('404.pug', {
        msg: '获取用户信息失败，请重试'
      })
    })

4.3、客户端调用SDK

main.js文件中调用了微信的扫码API：

import $ from 'zepto'
import 'weui/dist/style/weui.min.css'
import './index.css'

/* eslint no-console: 0 */
/* eslint no-unused-vars: 0 */
// eslint-disable-next-line prefer-arrow-callback
$(function () {
  wx.ready(() => {
    // 微信扫码条形码
    $('.g-index-button').on('click', () => {
      wx.scanQRCode({
        needResult: 1,
        desc: 'scanQRCode desc',
        success(res) {
          console.log(JSON.stringify(res));
        }
      });
    })
  })
})

注意： 这里使用了zepto库，使用webpack打包zepto的时候需要在webpack.config.js中额外配置：

plugins: [
    ...
    new webpack.ProvidePlugin({
      $: 'zepto/dist/zepto.min.js'
    })
  ],
module: {
    loaders: [
      ...
      {
        test: require.resolve('zepto'),
        loader: 'exports?window.Zepto!script'
      }
    ]
},

5、关于微信网页调试

微信web开发者工具提供了移动设备的调试，提供给你使用安卓手机或者iOS手机测试。具体测试流程在微信web开发者工具中的移动调试有说明。此时的测试环境你只能通过微信的扫网站二维码来访问你的页面，所以需要你自己将域名转为二维码，然后微信扫码访问。

6、微信网页在不同手机系统显示的坑

第一次做移动端的页面，果然经验不足，项目完成之后测试人员开始测试的时候在苹果手机发现好多问题，而这些问题之前在开发的时候都没有想到过，因为微信web开发者工具完全没有这些问题的，貌似微信web开发者工具更倾向于安卓系统。所以下次长记性了还是需要在苹果系统测试一下的。

6.1、使用weui-panel_ft并且内嵌按钮的时候兼容性会出现问题

在安卓系统的时候是如下显示：

取消和确认按钮和下面的轮廓线是有一个距离的，但是在iOS上这两个按钮却是直接抵住轮廓线的：

这个兼容性的问题暂时没弄清为啥，只能通过在下面的类中手动添加padding-bottom：

.g-ta-right {
    text-align: right;
    padding-bottom: 10px;
}

6.2、iOS系统弹出输入法的时候页面会自动放大

这个问题解决办法很容易，只需要在页面的head中配置如下：

    meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")

6.3、iOS系统默认将所有数字都转为可点击的a标签，可以呼出电话拨号功能

禁用该功能可以在页面的head中配置如下：

meta(name="format-detection", content="telephone=no")

对于某些特定的数字想要调用电话本的直接这么使用：

a(href="tel:0571-88223300") 0571-88223300

6.4、在输入框中输入完成后直接使用输入法的回车键没有提交表单而是直接刷新整个页面

这个问题主要是没有在代码中捕捉submit事件，所以我们可以有如下的代码：

  // 直接回车搜索城市列表
  $('#searchBar .weui-search-bar__form').on('submit', (e) => {
    e.preventDefault();
    citySearch()
  })

e.preventDefault();阻止submit事件去刷新页面而只是用自己实现的ajax请求

7、总结

第一次做移动端的页面，也是第一次在微信上面做开发，感觉都是很新鲜，很多坑都是自己踩出来的，也是攒了一些经验。写这篇文章的目的算是一个简单的总结，微信小程序已经发布看，后期可以试试玩一玩微信小程序的~~~~~~~

参考：

1. https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432&token=&lang=zh_CN
2. https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432&token=&lang=zh_CN