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_ft
And 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:
- Mp.weixin.qq.com/wiki?t=reso…
- Mp.weixin.qq.com/wiki?t=reso…