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

Posted 2022-12-03 zhiqiang21

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

微信小程序的目录结构

1.外联公共样式的方法

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

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

文档地址：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输入框。

<input type="number" bindinput="phoneInput" maxlength="13" class="bd-phonenum" placeholder="请输入手机号（无需注册）" value="inputValue" />

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++)
    //....