2018-10-18 微信小程序开发总结

这篇文讲什么

最近(2018年10月)刚开始弄微信小程序的开发,一边做一边写总结,这篇文章会不断更新

对谁有用

刚开始接触微信小程序开发的程序员

正文

  1. 顶部导航条:要么是用微信默认的(只能填文字)要么完全自己定制
    https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
    (看文档里的 window 部分)
    微信默认的顶部导航条就只能填文字。
    位置:安卓中靠左。iOS 里在中间。
    根据目前的信息,如果想全平台统一,比如都是在中间。
    类似小红书和即刻。那么就只能自己定制了。

  2. 底部tabBar:同样,要么用微信默认的,要么全部自己定制。
    图标大小官方建议 81x81,但是记得周边留一圈空白。如果图标顶满 81x81 看起来会过大。不精致。
    记得用 png 格式(jpg 格式是不能保存透明部分的)
    不支持 svg。
    https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
    看文档里的 tabBar 部分

  3. 尽可能多做真机预览,mac 上的微信开发者工具不是完全准确的。
    举例:tabBar 的图标在微信开发者工具中看起来有一点压扁了。
    实际真机上是没问题的。

  4. 可以用 web-view 显示网页,不过只能是自己在后台验证过的业务域名。而不是什么域名都能随意打开。
    https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

用法 <web-view src="https://wittcism.com/"></web-view>
1
缺点:

  1. 无法传递数据给网页。 2018年10月10号目前的文档中没有说明任何办法传递数据给网页,所以如果想把小程序中的登录状态传递给网页,让网页也同样登录。这个做不到
  2. 无法控制 web-view 的大小,会直接占满屏幕(文档里说的)

  1. filter 的功能,比如 vue 里那种。在微信小程序里要用 wxs 实现。小坑注意:
    直接修改 wxs 文件(比如我这个项目里是放到 filters/filter.wxs)你会发现 macOS 的微信开发者工具里虽然刷新了一下。但实际上输出没有变化。正确做法是随便改一下相应的 wxml 文件,比如随便在哪里加个"1"。此时 wxs 代码才会生效。

  2. 我打算用个框架看看能不能带来点好处,看了 https://github.com/justjavac/awesome-wechat-weapp 发现只有 wepy 和 mpvue 可以选(我不想写 React 所以不考虑 Taro)
    wepy 看了各处,吐槽非常多,不敢用。这个框架也是想加点 vue 里方便的特性进去。

mpvue 是美团的。可以用 Vue 来写小程序。赞。我们的官网也是 Vue 写的,
心里想着这下好了,开发速度说不定能提个50%。

看了大量资料,谷歌搜得到的都看了,博客,官方文档,Github。
本地 vue init 起来,demo 是 OK 的,
但是想迁移自己的 Vue 项目过来,复制黏贴的时候,pug 不知道怎么配。然后就是各种报错信息。
简单说就是 mpvue 从入门到放弃

感觉官方文档可以写篇教程,目前2018-10-14 纯粹是罗列了各种特性。哪些不能用。等等。

总之结论是,框架都不用了,wepy/mpvue 都不用。好好写原生。
另外是 2018-10-14 看了 mpvue 的 Github issue,很多 open 的,没人理,担心我用了 mpvue 之后也是这样,可能会碰到什么问题求助无门然后卡住,又因为自己的 webpack 和 mpvue 知识不够,不知道从何下手。所以还是原生保险。

  1. 小程序里无法长按识别二维码。因此 “联系我们” “联系客服” 等类似功能,无法通过 <image> 标签显示一张图片然后让用户长按识别来实现。
    解决方法是:点击后"复制微信号到剪切板",让用户自己去加。目前只能这样。

wx.previewImage 也试过。安卓和苹果都不能长按复制。

        wx.previewImage({
            urls: ['二维码图片地址'],
            current: 0
        });

如果要复制文字用 wx.setClipboardData 就行了。
文档:
https://developers.weixin.qq.com/miniprogram/dev/api/device/clipboard/wx.setClipboardData.html
例子:

        wx.setClipboardData({
            data: 'Hello-WITI'
        })

文章更新时间

  • 第一次写:2018-10-10
  • 更新1: 2018-10-14
  • 更新2: 2018-10-18

2018-10-18 微信小程序开发总结
Share this

Subscribe to 1c7 的博客