微信小程序: 公仔昵称

作者: 科技微讯

日期:

写了个微信小程序: 公仔昵称.

wechat gongzainicheng

为什么写这个小程序

练手, 这是一个比较简单的小程序; 2016 年底我做了一个关于如何制作微信透明头像和透明昵称的视频, 发现人们对起一个有趣的昵称这个话题很感兴趣.

公仔昵称有什么不同

用起来很简单, 公仔昵称只有一个页面, 只需输入一次, 就可以得到用内置的模板生成的各种花式昵称, 你可以在同一个页面对比各种昵称效果, 然后挑选自己最喜欢的. 其他小程序有很多页面, 要求用户每一种模板都输入一次, 有点麻烦.

微信对昵称的设置限制比较多, 其它小程序生成的昵称很多不能用于微信, 公仔昵称的昵称基本可用于微信, 对于不可用于微信的部分, 我也做了提示.

用模板生成的昵称因为用的人多, 所以已经不那么个性了, 公仔昵称收集了 1000+ 可用于微信的特殊字符, 用户可以从这些字符自由组合成真正属于自己的个性昵称.

经验总结

设计并不好看. 觉得自己大脑缺少设计素材, 想不出好看的界面, 我不是一个天马行空富有创意的人, 以后多看看别人是怎么设计的, 多积累一点灵感.

为了提高小程序开发速度, 写了一个简单的 boilerplate, 以后根据实际经验和需求不断丰富完善.

微信小程序的 wxss 不支持通配符选择器 *, 不过可以在 app.wxss 用标签选择器一个个地把标签设置为你希望的样式:

/* app.wxss */
view {
  box-sizing: border-box;
  font-size: 30rpx;
}

微信小程序页面加载太多数据时可能会显示白屏, 不是很明白原因, 分页显示数据可解决.

bindtap 函数无法获取 dataset 的数据, 原来我一直用 e.target.data, 把它改成 e.currentTarget.data 就可以了. targetcurrentTarget 分别是源组件和当前组件.

在页面添加一个分享按钮, 可以使用 <button> 组件, 但样式怎么自定义呢? 怎么让它看起来不是一个按钮的样子? css 可以这样写:

.share-button::after {
  border: none;
}

.share-button {
  background: none;
}

Unicode 编码如果超过 4 个 16 进制数, 可以加大括号表示, 例如 \u{1f1ec}, 有时候可以用两个 4 个16 进制的数字表示.

console.log('\u{1f1ec}' === '\uD83C\uDDEC') //true

在 js 代码中, '\u0061' 和 'a' 是一样的东西, '\\u0061' 和 '\u0061' 差别很大, 前者表示 \u0061, 后者表示 a.

\u0061 表示的是一个 string, string 要用引号标注, 但 0x0061 是一个 number, 不需要引号. 所以 String.fromCodePoint(0x0061) 是正确的写法, 但 String.fromCodePoint(\u0061) 是错误的写法.