微信小程序开发知识点总结

Myth丶恋晨 2022-07-12 08:40 514阅读 0赞

# 微信小程序开发知识点总结 #

## 微信小程序的目录结构 ##

![2017-02-17-035147.jpg_imageslim][]

## 1.外联公共样式的方法 ##

根据微信的官方文档，是支持`@import`的方式一如外联的公共样式的

> 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

文档地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html][https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxss.html]

但是在实际的开发过程中如果通过`@import '../../common.wxss'` 的方式引入外联的公共样式`common.wxss` 却是不生效的。如果是引用文件和被引用文件在相同的目录下是生效的。即`@import 'common.wxss'`的方式

那么怎么管理我们的公共样式呢？根据官方文档。在根目录的`app.wxss`中定义的样式在所有页面中都生效。

所以我们的`wechat-sdk`的公共样式都是在根目录的`app.wxss`中定义的。

## 2.关于`toast`提示 ##

微信小程序的 **API** 默认是支持toast的。 但是`wx.showToast(OBJECT)`方法的弹层却是默认带有一个`icon`。只可以配置`success`和`loading`两种方式。在我们的项目中不实用。所以在我们的项目中使用自定义的方式。

使用方法：

在需要使用toast的`wxml`中添加下面一段代码(因为是`fixed`定位可以放在任意位置，一般放在页面最底部):

<view style="display:{ { toast?'block':''}}" class="bd-toast">{ { toasttxt}}</view>

在对应的`.js`文件中通过`import`的方式引入toast方法

import { toastFn } from '../../utils/toastFn';

在需要弹层的地方直接调用就可以了

/** *@ _this 指向当前的page对象 *@text toas中显示的文案 */
    toastFn(_this,[text]);

## 3.使用ES6开发提升开发效率 ##

小程序是默认支持ES6语法的，而且在上传代码的时候会自动把ES6编译为ES5。  
在第二小节中使用`import` 的方式引入`toastFn`就是使用ES6的`import`

那么使用它有什么好处呢？好处之一就是不用引入第三方库就可以实现代码模块化。

比如我在目录`requestapi`主要定义的是关于接口请求的代码块。在 `utils` 中定义的是功能代码块。在需要他们的地方直接通过 `import`的方式引入就可以直接使用。`import`可以把代码做很好的隔离。

## 4.`config.js` 配置文件的使用 ##

为了便于线下联调和测试。把依赖环境的项通过配置文件的方式管理起来。在需要的地方直接`import`来引用。如果需要上线的话只需要在这一个文件中打开相应的注释和关闭相应的注释就可以了。

//qatestc测试环境域名
    export const hostName='https://wappass.qatest.baidu.com/';
    
    //线上环境域名
    // export let hostName='https://wappass.baidu.com/';
    
    //产品线配置验证成功后跳转的url
    export const jumpProductUrl = '/testsuccess/testsuccess';
    
    //产品线配置的tpl
    export const tpl = 'waimai';
    
    //是否开启debug模式
    export const DEBUG=false;

比如说接口的请求都是通过以下的方式来写，达到统一管理测试环境和线上环境的目的：

import {hostName}  from '../config';
    
    wx.request({ //接口请求 url: hostName+'wp/api/security/checkvcode', data: { verifycode: vcode, codestring: _this.data.imgcode },
            method: 'GET',
            header: { 'content-type': 'application/x-www-form-urlencoded' },
            success: function (res) { } })

## 5.怎么获取表单的数据 ##

因为小程序的开发思想是借鉴 Vue.js 这类**MVVM**框架的数据绑定的思想。我们是没办法直接操作所谓的“DOM”的。那我们怎么获取页面的数据或者是更新页面上的数据呢？下面介绍下数据绑定的思想

比如页面上有下面这样的一个`input`输入框。

Page({
        data:{
            inputValue:'input的默认值'   //wxml中会把使用{ {inputValue}}的地方的值和这里绑定起来
        },
        phoneInput:function(e){ 
            let value = e.detail.value;//获取输入框的值
        },
        updatePageData:function(){ 
            //这里是去更新页面中input 中的值
    
            this.setData({
                inputValue:'更新的值'    //会更新页面中绑定了{ {inputValue}}的节点
            })
        }
    })

**从上面的代码可以了解到为什么基于数据绑定的类MVVM框架火起来的原因。前端一直再谈就是操作DOM影响页面性能。要尽量少的操作DOM。而上面的代码在没有操作的DOM的情况下就完成了获取页面上的数据和更新页面的数据。而且代码更加的简洁。**

## 6.mock.js能否在微信小程序中使用 ##

`mock.js`因为能够拦截`ajax`请求，然后返回特定格式的数据。而被广泛的应用于前后端分离的开发模式中。那么在微信小程中是否可以使用`mock.js`呢？

答案是否定的。因为微信小程序中的所有接口请求都必须经过客户端转发并不是原生的`ajax`请求。但是可以借助`mock.js`的思想封装一个根据特定的url返回特定数据的方法。在`config.js`中配置变量**`DEBUG`**是否开启调试模式。

然后再`apiAjax.js`中配置,如下图

import * as Mock from '../mock/mock';
    
    const apiAjax = (api, dataMethod, method = 'POST', fnSucc, thisData) => {
        if (!DEBUG) {
            wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData);
        } else {
            /** * 模拟数据可以在这里配置switch 的方式 * case 的条件判断语句即为要请求的接口 */
    
            switch (api) {
                case hostName + '/wp/api/security/getphonestatus':
                    fnSucc(Mock.testApi(api), thisData);
                    break;
    
                default:
                    wxRequestApi(api, dataMethod, method = 'POST', fnSucc, thisData);
            }
        }
    }

所有关于特定接口的返回数据都是在`mock/mock.js`中进行配置，配置方式可以参考配置示例：

/** * 测试接口返回数据样式 * * @returns */
    const   testApi = ()=>{
        return {
            a:1,
            b:2
        }
    }
    
    /** * 这里导出相应模拟数据的函数名 */
    export {
        testApi
    }

## 7.最后就是关于第三方库的使用了 ##

开发过程中需要使用`RSA`加密。我在微信小程序中引入了我们线上项目的`RSA`加密算法源文件。但是却不能够正常运行。尝试建立测试的`html`页面加入该加密算法文件。代码可以正常运行。使用`node test.js`运行js文件也能够正常运行。但在微信小程序中就是不能够正常运行。

在**花费了大约有3个多小时**的时候后还是找到了问题的原因。问题的原因也很简单：**微信小程序会把js文件默认按照`"use strict"` 运行**。而`RSA`加密算法的源文件并没有使用`"use strict"`。

看下面的两段代码，如果不加头部的`"use strict"`声明。两段代码都是可以正常运行。如果运行在`"use strict"`的声明下就会报错。之所以花了很长时间解决这个问题，也就是看到这样的错误的时候，根本就没有往这方面考虑，因为他们看起来确实是正常的。

"use strict"
    for(i=0;i<10;i++){
       //i is not defined
        //....
    }
    
    
    for(var i=0;i<10;i++){
        //....
    }

[2017-02-17-035147.jpg_imageslim]: http://7xs2tr.com1.z0.glb.clouddn.com/2017-02-17-035147.jpg?imageslim
[https_mp.weixin.qq.com_debug_wxadoc_dev_framework_view_wxss.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html