Skip to content

微信小程序

new Date

微信小程序 new Date() 方法在iOS设备上无效的问题的解决方法

javascript
let date = "2021-01-04 00:00"
let now = new Date(date.replace(/-/g, '/'))

小程序分包

小程序的限制

  • 分包不能引用主包中的第三方库
  • 正常情况下,小程序对代码包的限制是:大小不超过 2M,超过这个大小无法预览,也无法上传代码
  • 做了分包加载的情况下,限制是:每个包大小不超过 2M,所有包总共的大小不超过 16M。

分包后项目的构成

  • 分包后,小程序项目由 1 个主包 + 多个分包组成:
  • 主包:一般只包含项目的启动页面或 TabBar 页面、以及所有分包都需要用到的一些公共资源
  • 分包:只包含和当前分包有关的页面和私有资源

分包的加载规则

① 在小程序启动时,默认会下载主包并启动主包内页面 tabBar 页面需要放到主包中

② 当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示非 tabBar 页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subpackages": [
    {
      "root": "pages/packageA",
      "pages": [
        "child/child",
        "parent/parent"
      ]
    }
  ]
}

访问路径:packageA 访问子页面 child

js
gotoChild()
{
    wx.navigateTo({
        url: '/pages/packageA/child/child',
    })
}

微信小程序 跳转

js
export const goUrl = (url: string) => {
    // switchTab
    if (url.startsWith('https')) {
        // url 编码
        url = encodeURIComponent(url);
        wx.navigateTo({
            url: `/pages/webview/webview?url=${url}`,
            fail: (err) => {
                console.log(err, '跳转失败')
            }
        });
        return;
    }
    wx.switchTab({
        url: url,
        fail: (err) => {
            wx.navigateTo({
                url: url,
                fail: (err) => {
                    console.log(err, '跳转失败')
                }
            });
        }
    })
}


// url 解码
export const decodeUrl = (url: string) => {
    return decodeURIComponent(url);
}

微信小程序 Request 封装

js
class Request {
    defaultConfig = {
        baseUrl: '',
        header: {},
    }

    interceptor = {
        request: (config: any) => {
            return config;
        },
        response: (res: any) => {
            return res;
        },
    }

    constructor(
        baseUrl: string,
        headers = {
            'Content-Type': 'application/json',
        }
    ) {
        this.defaultConfig.baseUrl = baseUrl;
        this.defaultConfig.header = headers;
    }

    request(url: string, data: any = {}, header: any = {}, method: string = 'GET') {
        return new Promise((resolve, reject) => {
            let config = {
                url: url,
                data: data,
                header: header,
                method: method,
                success: (res: any) => {
                    resolve(res);
                },
                fail: (err: any) => {
                    reject(err);
                },
            };
            config.url = this.defaultConfig.baseUrl + url;
            config.header = {
                ...this.defaultConfig.header,
                ...header,
            };
            config = this.interceptor.request(config);
            wx.request(config);
            this.interceptor.response(config);
            wx.onNetworkStatusChange((res: any) => {
                if (!res.isConnected) {
                    reject(new Error('网络已断开'));
                }
            });
        });
    }

    get(url: string, data: any = {}, header: any = {}) {
        return this.request(url, data, header, 'GET');
    }

    post(url: string, data: any = {}, header: any = {}) {
        return this.request(url, data, header, 'POST');
    }
}

export default Request;


const http = new Request('https://www.baidu.com');
http.interceptor.request((config) => {
    console.log('请求拦截器', config);
    return config;
})
http.interceptor.response((res) => {
    console.log('响应拦截器', res);
    return res
});

http.post('/api/user').then((res) => {
    console.log(res);
})

格式化接口返回的html内容

js
export const formatHtml = (html: string) => {
    let result = html
    result = result.replace(/section/gi, "div")
    result = result.replace(/data-src/gi, "src")
    result = result.replace(/src="data:/gi, 'data-src="data:')
    result = result.replace(/<img[^>]*>/gi, function (match: any) {
        var match = match.replace(/style/gi, "styles")
        return match
    })
    result = result.replace(/\<img/gi, '<img style="max-width:100%!important;height:auto!important;display:block;" ')
    return result
}