关于 toast

小程序自带 wx.showToast 必须传入 icon:

wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
});

但本身想采用节能的 toast:

机动封装 toast 捎带默认类型及自定义类型是个科学的取舍:

switch (opts.type) {
    case 'common':
        page.setData({
            'render.toast.show': true,
            'render.toast.message': opts.message
        });
        let t = setTimeout(() => {
            page.setData({
                'render.toast.show': false,
                'render.toast.message': ''
            });
            opts.callback();
        }, opts.duration);
        break;
    case 'loading':
        wx.showToast({
            title: opts.message,
            duration: opts.duration,
            icon: 'loading'
        });
        break;
    case 'success':
        wx.showToast({
            title: opts.message,
            duration: opts.duration,
            icon: 'success'
        });
        break;
}

一个最中央的小程序项目需具备:app.js(入口文件)、app.json(全局配置)、app.wxss(通用样式)、pages/(页面)。pages/
下的每一页面拥有独立的 .js、.json、.wxss。形如:

踩坑札记

关于 wx.reportAnalytics

小程序数据解析可通过填写配置上报、API 上报:

对于填写配置上报,需提交触发动作、触发页面、触发元素、埋点数据等。但埋点数据需从
page data 中获取,看看官方文档是怎么曰的:

事件数量来自对页面 page 实例 data 对应字段值的募集。

OMG…需要在 page data
内保障埋点状态,当埋点量较大时报告数据的复杂度总之。我曾傻傻的认为
data 字段值等同 dataset 值:

<text
    wx:for="{{ areas }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-idx="{{ index }}"
    bindtap="tapItem">{{ item.name }}</text>

未曾想竟为 page 实例中的 data 值:

Page({
    data: {},
    onLoad: function () {},
    onReady: function () {}
});

如此看来 API 上报更简短,为触发元素 dataset 埋点多少并调用
wx.reportAnalytics 传入参数:

<text
    wx:for="{{ orders }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-type="order"
    bindtap="triggerSelected">{{ item.name }}</text>

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    wx.reportAnalytics('click_fliter_item', {
        item_type: type,
        item_id: id,
        item_name: name
    });
}

关于 wx.getLocation

首次 执行 wx.getLocation 小程序将机关调启如下 dialog:

请留心是
首次!无论用户挑选“确定”或是“撤消”,再次进入“更美测试”均不会被问询是不是打开定位(调用
100 次 wx.getLocation
也不算)。除非用户手动清理微信缓存、更新微信、切换账号…

各样缓存:

存在上述问题的 API 绝不止 wx.getLocation 例如
wx.login,遗憾的是,小程序没有开放清理缓存的接口。但可经过
wx.openSetting 再度伸手用户打开授权:

  • assets:静态资源

    <image /> 及 tabBar 匡助引用本地静态资源,而 wxss 中
    background-image 不襄助,但帮忙引用 base64 及网络资源。

  • components:公用组件

  • templates:公用模板

    组件

    模板
    的使用场景易混淆。父节点可向组件也可向模板传入 data
    控制其视图。然组件的优势在于其
    数码监听事件监听生命周期 等机制,自行科普 component
    构造器

    你便明了。

    但协会组件成本较高,json、wxml、wxss、js 需齐备:

    反之模板较便捷,构造 wxml 接收 page data 即可:

    <template name="mError">
        <view class="mError">
            <image src="/assetsholder_error.png"></image>
            <text>网络错误</text>
        </view>
    </template>
    <template is="mError" />
    

    将模块封装为组件或是模板需开发者分析其特征并结成工作场景定夺(纯粹的视图控制请采取模板)。

  • settings:配置文件

    module.exports = {
        version: '1.0.0',
        server: 'https://backend.igengmei.com',
        release: 1
    }
    

    开发阶段的网络环境往往与生育阶段不同,settings.js
    配置了生育环境,需自行成立
    settings_local.js(不入库)配置开发环境。

    var settings = require('settings');
    var settings_local = null;
    try {settings_local = require('settings_local');} catch (err) {}
    module.exports = settings_local || settings
    

    上述脚本会优先 export settings_local.js 内配置。也可将 server
    配置为本地服务,然小程序合法域名不帮忙localhost…大家可在开发阶段“不校验安全域名、TLS 版本以及 HTTPS
    证书”。(在微信开发者工具中装置)

  • utils:公用脚本

    utils 类脚本非全局注册需在 page 内 import 方可调用。app.js
    内注册的全局函数无需 import,可由此 app.method(params) 间接调用:

    // utils 类脚本
    import Common from '../../utils/common'
    
    const app = getApp();
    Page({
        data: {},
        ...Common,  
        onLoad: function () {
            this.exampleRequest();
            // 全局注册类脚本
            app.showToast(this, {
                message: '呆恋小喵一枚',
                duration: 3000,
                type: 'common'
            });
        },
        exampleRequest: function () {
            // 全局注册类脚本  
            app.request({
                url: 'url',
                method: 'GET'
            });
        }
    });  
    

    大局注册使用率高的模块,可缩短 page 内的 import,例如
    app.request(params)、app.showToast(params) 等:

    import { getBaseInfo } from 'utils/baseInfo'
    import Request from 'utils/request'
    import Toast from 'utils/toast'
    
    App({
        GLOBAL: {
            baseInfo: getBaseInfo()
        },
        request: function (params) {
            Request(params);
        },
        showToast: function (page, opts) {
            Toast.show(page, opts);
        }
    });
    

    也可在 GLOBAL 内注册一些大局 data,在 page 内通过
    app.GLOBAL 获取。

关于 setData

若是你想在 this.setData 的 key 中流传变量,下述写法报错:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    this.setData({
        selected[type]: {
            id: id,
            name: name
        }
    });
}

且 this.setData 不匡助模板字符串情势的 key,下述写法也报错:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    this.setData({
        `selected.${type}`: {
            id: id,
            name: name
        }
    });
}

可将 selected 存入变量,间接操作 selected 变量后再 this.setData:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    var selected = this.data.selected;
    selected[type] = {
        id: id,
        name: name
    };
    this.setData({
        selected: selected
    });
}

检测 page data 内 selected 值与预期的均等,但当 selected
与视图渲染相关时,出人意料的意况时有发生了…假定我经过 selected
的某一属性值控制元素 class:

<text
    class="{{ selected.order.id == item.id ? 'active' : '' }}"
    wx:for="{{ orders }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-type="order"
    bindtap="triggerSelected">{{ item.name }}</text>

当元素被点击时其 class 被赋值 active 使之展现红色:

其后本身点击了另一与往日被点击元素 type
不同的要素,理论上不应影响率先次被点击元素的事态(selected.type2
变化不影响 selected.type1),然则:

active 仍在肉色却不见了,这 bug 也是醉了,我只能写点烂代码了(通过
switch case 一一处理):

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    var selected = this.data.selected;
    switch (type) {
        case 'area':
            this.setData({
                'selected.area': {
                    id: id,
                    name: name
                }
            });
            break;
        case 'tag':
            this.setData({
                'selected.tag': {
                    id: id,
                    name: name
                }
            });
            break;
        case 'order':
            this.setData({
                'selected.order': {
                    id: id,
                    name: name
                }
            });
            break;
    }
}

未完待续,谢谢关注~


作者:呆恋小喵

连带著作:微信小程序支付心得

本身的后花园:https://sunmengyuan.github.io/garden/

我的
github:https://github.com/sunmengyuan

原文链接:https://sunmengyuan.github.io/garden/2018/01/04/xcx-gm.html

关于 wx.getSystemInfo

调用 wx.getSystemInfo 可得到装备信息,fail
回调限制了得到败北时的尝试次数:

function getMobileInfo(i) {
    wx.getSystemInfo({
        success: (res) => {
            BaseInfo.mobile = res.brand + res.model;
            BaseInfo.system = res.platform + res.system;
            BaseInfo.wechat = res.version;
            BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
            BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);
        },
        fail: () => {
            (i < 3) && getMobileInfo(i + 1);
        }
    });
}
getMobileInfo(0);

请留意 windowWidth、windowHeight 度量单位为 px,而我司项目规定采用rpx。为落实单位联合,需对 windowWidth 及 windowHeight 做单位转换:

BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);

1rpx = (设备宽度 / 750) px

超荣幸可以出席我司【更美小程序】的搭建,在此分享些心得希望可以协理到像自家同样的前端界萌新。因【更美小程序】源码需保密,我仅向我们享受基础建设级其余非业务代码。点我~

关于 rpx

rpx 在不同装备被小程序换算为 px 时能暴发各个 bug,当设备宽度除不尽 750
时结果值精确至哪一位呢(额…bug 爆发原因本人猜的),看看换算表:

举个例证:

<view class="fliter-bar" style="top: {{ top }}rpx;"></view>
<view class="fliter-wrap" style="top: {{ top + 84 }}rpx;"></view>

问题一:当 top = 0 时,0rpx 被换算为 0.5px 也是立志~

化解方案:

<view class="fliter-bar" style="top: {{ top ? (top + 'rpx') : 0 }};"></view>

题目二:当 fliter-bar 中度为 84rpx,理论上紧贴的 fliter-bar 与
fliter-wrap 在一些装置上也不紧贴…

想询问更多请参考
微信小程序代码构成。对于中大型项目需明确划分效率模块,我司小程序文件目录如下:

关于 onPullDownRefresh

enablePullDownRefresh 仅可打开 pulldown 的互相及监听,并非想象中的
window.location.reload。我们需要定义自己的 reload:

reload: function (page, callback) {
    page.setData({
        reqError: false
    });
    callback && callback();
    page.onLoad();
    page.onReady();
}

onPullDownRefresh: function () {
    const _page = this;
    Loadmore.clear(_page);
    app.reload(_page, function () {
        _page.setData({
            'render.orders': [],
            'render.loading': true,
            'render.empty.show': false
        });
    });
    wx.stopPullDownRefresh();
}

小程序无 window 概念,不可调用 window.location.reload。其实 reload
无非 重置 data、重新调用 onLoad
onReady(原谅自己这肤浅的知晓,但您可在 callback
中做其他意义上的重置)。

在 onPullDownRefresh 回调执行时 wx.stopPullDownRefresh() 制止用户疯狂
pulldown 导致卡涩。

关于 tabBar

app.json 内可配备 tabBar 的
pagePath、text、iconPath、selectedIconPath,但图标尺寸、文字大小、元素间距不足自定义。icon
尺寸指出为 81px * 81px,若 icon
切图恰好撑满画布,图标与文字便相互紧贴不美观。故 icon
切图底边距需具备保留:

关于 <rich-text />

<rich-text /> 渲染时不会将 nodes
解析为健康标签,你只好得到如此一大坨:

不知所厝直接得到其中的 dom,且不得在 .wxss 中定义其样式故必须添加内联
style。

且 <rich-text /> 无法对 nodes 自动纠错:例如有些浏览器可解析
<u>一段错误代码</u>, <rich-text />
则直接过滤错误代码不开展渲染。

相关文章

网站地图xml地图