miniProgram

注意事项

微信小程序和原生web语法不同的地方&小技巧

一、wxml

  1. swiper 标签存在默认宽高（100% * 150px）。
  2. image 标签也存在默认宽高（320px * 240px），可以进行设置全局的样式width: 100%;和特性mode="widthFix"来当作普通img标签使用。

二、wxss

  1. 不支持通配符选择器（*）

  2. wxss支持变量，语法（设置主题颜色）：

    • 定义：--themeColor: #eb4450;
    • 使用：color: var(--themeColor);

  3. 如果使用了less，并且使用了类似calc(100vh - 70rpx)的语句的话，自动生成的wxss会计算错误，变成calc(30vh)。想要原来的代码的话应该使用字符串：~'calc( 100vh - 70rpx )'

三、wxs

相当于页面js中分出来的模块文件

需要使用module.exports导出模块中的数据，然后在引入wxs的wxml中使用module特性定义引入的对象名：

1
2
3
4
5
6
7
8
9
10
11
// /pages/tools.wxs

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";
1
2
3
4
5
<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

四、将后台域名添加到小程序后台

  1. 点击微信小程序开发者中心
  2. 左侧开发Tab
  3. 服务器域名
  4. 修改【request合法域名】
  5. 扫码
  6. 添加域名

五、js

  1. 在wx:for中，使用字符串*this可以指代循环中的item本身。当数组内都是简单类型时，可以使用*this作为wx:key的值。
  2. 小程序中本地存储通过wx:getStorageSync(key)同步方法获取，通过wx:setStorageSync(key，value)设置。注意：web中会调用toString方法转换成字符串储存，所以复杂类型需要手动调用JSON.stringify方法；而小程序中没有转换需要，存进去什么数据，取出来就是什么数据。
  3. 下拉刷新请求成功后可以通过wx.stopPullDownRefresh方法关闭加载动画
  4. data属性中的成员（如各种list）尽量只包含wxml中使用到的数据，存放太多会导致性能稍微下降。
  5. 模拟计算属性：可以写一个方法，形参为计算属性依赖的数据，方法中计算出需要的数据，然后setData
  6. input标签内的bindinput绑定的方法不能设置异步，否则搜索框内会固定显示[object Promise]

六、小程序开发工具

  1. 编译模式：可以设置小程序启动/重启时打开的第一个页面。每增加一个编译模式，都可以设置不同的启动页。

  2. 可以通过wx.chooseAddress 等方法获取用户权限，但是如果第一次获取权限被拒绝的话，之后就不能再次获取了。

    此时需要通过wx.getSetting方法返回的结果中scope属性的成员来查看权限状态（用户授权了值为true，用户拒绝授权值为false，用户从未授权则值为undefined）。

    如果用户拒绝过授权的话，再次授权前要先调用wx.openSetting方法打开专门的授权页面让用户再次授权。然后再在success中重新调用wx.chooseAddress等方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    Page({
        handleChooseAddress () {
            // 1. 尝试直接获取权限
            wx.getSetting({
                success (res) {
                    // 2.如果属性名有可能是undefined，就开始使用中括号语法，防止从undefined上获取数据而报错
                    const scopeAddress = res.authSetting['scope.address']
                    if (scopeAddress || scopeAddress === undefined) {
                        wx.chooseAddress({
                            success (res2) {
    							console.log(res2)
                            }
                        })
                    } else {
                        // 3. 用户拒绝过授权，需要先让用户重新授权
                        wx.openSetting({
                            success (res3) {
                                const res2 = await wx.chooseAddress()
                            	console.log(res2)
                            }
                        })
                    }
                }
            })
        }
    }) // 要使用async await的话需要自行封装并返回promise

    注意：状态是存放在缓存中的，测试时需要先清空缓存。

  3. 项目上线：

    1. 上线之前一定要把不校验合法域名功能关闭，请求接口全部添加到小程序后台信任列表中。
    2. 项目大小不能超过2M，超过的话需要进行分模块处理（此时不能超过16M），具体信息可以在详情 → 项目配置中看到。
    3. 不会将小程序用不到的文件上传（比如less文件）。
    4. 上传完成后能在小程序后台 → 管理 → 版本管理中看到，需要将开发版本进行审核，审核通过后才能上线。