Nodejs下 wechat web development tutorial (1)

4.2 Configuring the SDK

Since this demo uses a server-side rendering template engine, we should obtain the parameters specified in the JSSDK usage steps wx.config before sending the file to the client:

Wx. config({debug: true, // Enable debug mode, the return value of all API calls will be alert in the client, if you want to view the passed parameters, you can open it in the PC, parameter information will be printed in the log, only on the PC. Timestamp:, // Required, generated signature nonceStr: ", // Required, generated signature random string signature: ",// Required, signature, see Appendix 1 jsApiList: [] // Required, list of JS interfaces required, see Appendix 2 for a list of all JS interfaces});Copy the code

Accomplish this goal is in server/helper/weixinSignature js, the file returns a promise, and then in toController. Js used in the following code:

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: 'Failed to get user information, please try again'})})Copy the code

4.3 The client invokes the SDK

The main. Js file calls the scanning API of wechat:

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(() => {// 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)); }}); })})})Copy the code

Note: The zepto library is used here, and additional configuration in webpack.config.js is required to package Zepto with webpack:

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

5, about wechat web debugging

Wechat Web developer tool provides mobile device debugging, you can use android phone or iOS phone test. The specific testing process is explained in mobile debugging in wechat Web developer tools. In this test environment, you can only access your page by scanning the QR code of wechat website, so you need to convert the domain name into the QR code, and then scan the code to access wechat.

6, wechat web page in different mobile phone system display pit

Inexperienced as mobile end page for the first time, and sure enough, after the completion of the project testers started testing on apple mobile phone found a lot of problems, and these problems at the time of development have not thought of before, because WeChat web developer tools have absolutely nothing to these questions, seemingly WeChat web developer tools tend to android. So the next manager’s memory or need to test in the Apple system.

6.1, use,weui-panel_ftAnd there are compatibility issues with embedded buttons

On Android, it looks like this:

The Cancel and confirm buttons are at a distance from the outline below, but on iOS they are directly against the outline:

We can only add the padding-bottom function manually in the following class:

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

6.2 The iOS system will automatically enlarge the page when the input method is displayed

The solution to this problem is easy, just configure the following in the page head:

Meta (name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0")Copy the code

6.3 by default, the iOS system will turn all numbers into clickable A labels, which can make calls to the dialing function

Disabling this function can be configured in the head of the page as follows:

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

For certain numbers you want to call the phone book directly:

a(href="tel:0571-88223300") 0571-88223300
Copy the code

6.4. Directly refresh the entire page without submitting the form by using the Enter key of the input method after input in the input box

The main problem is that the Submit event is not captured in the code, so we can have the following code:

$('# searchbar.weui-search-bar__form '). On ('submit', (e) => {e.preventdefault (); citySearch() })Copy the code

e.preventDefault();Prevent the Submit event from refreshing the page with its own ajax request

7,

It is the first time to do mobile pages, and also the first time to do development on wechat, which feels very fresh. Many pits are stepped out by themselves, but also accumulated some experience. The purpose of writing this article is a simple summary, micro channel small program has been released to see, later can try to play a play micro channel small program ~~ ~

Reference:

  1. Mp.weixin.qq.com/wiki?t=reso…
  2. Mp.weixin.qq.com/wiki?t=reso…