微信小程序开发实践记录
近期公司需要开发一个小程序项目,时间非常紧急,在开发过程中遇到几个困扰的问题及解决方案,记录如下:
小程序框架选择
- 基础框架:小程序原生框架 + sass
- ui: 采用 vant weapp
- 图表:采用 ec-echarts
小程序开发
- 1 微信小程序 打开问卷星
- 2 微信小程序 wxs 使用正则的问题
- 3 微信使用 echarts 层级问题
- 4 h5 中判断是否在小程序环境中
- 5 嵌套 h5 中实现分享企微、微信和下载功能
- 6 vant weapp 样式覆盖处理
1 微信小程序 打开问卷星
小程序功能中有一个满意度调查的功能,不是原生功能,而是使用三方的问卷星网页链接,我们知道,小程序中需要嵌套网页的话,其中一条要求就是需要在网站的根目录下存放校验文件,但我们不可能在问卷星网站下去存放校验文件,所以这个功能当时陷入了困境,偶然查看问卷星的文档,发现其有小程序版同样可以使用问卷调查,但需要一个 activityId ,看格式与网页链接后缀中的一段 path 非常像,如下:
拿过来试了一下,发现真的可以使用,问题就此解决,代码如下:
2 微信小程序 wxs 使用正则的问题
因为小程序的机制,我们要在 wxml 中使用函数的话,只能通过 wxs 脚本的方式引入到页面中使用,在使用正则的时候,本人顺其自然的按照 js 中的语法使用正则,导致各种报错,还一头雾水,仔细阅读文档后发现,正则在小程序中的使用语法是不同的,需要使用自带的 getRegExp 方法,并且前后无需 / 作为开始、结束,方法包含两个参数,第一个为正则表达式的字符,第二个为正则的修饰符,代码如下:
var numberWithCommas = function (n) {
return n.toString().replace(getRegExp('\B(?=(\d{3})+(?!\d))', 'g'), ',');
}
3 微信使用 echarts 层级问题
参考微信小程序,原生组件同层渲染:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E5%90%8C%E5%B1%82%E6%B8%B2%E6%9F%93
在开发者工具中 echarts 的样式会重叠到其它组件上面,但真机中会正常显示,所以如果开发中能看得下去,就可以先不用管,解决方案的代码如下:
<view class="xc-bar">
<!-- 目前在开发者工具中会有重叠的情况,真机不会 -->
<ec-canvas canvas-id="xc-bar" ec="{{ ec }}" id="{{ecid}}"></ec-canvas>
<!-- 以下可以解决在开发者工具中重叠情况,暂无必要 -->
<!-- <ec-canvas canvas-id="xc-bar" force-use-old-canvas ec="{{ ec }}" id="{{ecid}}"></ec-canvas> -->
</view>
4 h5 中判断是否在小程序环境中
项目中嵌入了h5 页面,在不同的环境中,某些功能是不同的,需要我们根据环境的不同来判断处理,判断方式如下,但有一个需要我们注意的问题:
export const isWx = () => {
return new Promise(resolve => {
try {
if (window.__wxjs_environment === 'miniprogram') {
resolve('mini-wx');
} else {
resolve('no-mini-wx');
}
// window.wx?.miniProgram.getEnv((res: IMini) => {
// if (res.miniprogram) {
// resolve('mini-wx');
// } else {
// resolve('no-mini-wx');
// }
// });
} catch (err) {
resolve('no-mini-wx');
console.log(err);
}
});
};
代码中判断的地方,都是官方文档所提供的,而被注释掉的部分,则是因为在某些情况下,getEnv 方法虽然存在,但并不会执行传入的方法,而导致 Promise 挂起,页面操作卡死。
5 嵌套 h5 中实现分享企微、微信和下载功能
项目中嵌入的h5有多个入口,包含分享功能,在app中可以通过bridge调起原生的分享、下载功能,但是在小程序中,因为平台限制的原因,不能调起小程序的 api,并且提供的jssdk也没有相关功能,所以在实现这个功能时,只能像淘宝等应用一样,把想要分享的数据,一键复制到粘贴板上,h5 粘贴复制的代码如下:
export const copyText = (text: string, cb?: () => unknown) => {
const textarea = document.createElement('textarea'); // 创建一个 textarea 元素
textarea.value = text; // 将要复制的文本赋值给 textarea 的 value 属性
document.body.appendChild(textarea); // 将 textarea 元素添加到页面中
textarea.select(); // 选中 textarea 的内容
document.execCommand('copy'); // 执行复制命令
document.body.removeChild(textarea); // 移除 textarea 元素
cb && cb();
};
目前 execCommand 这个方法已被弃用,大家可以自行搜索最新的语法,转换也很简单
6 vant weapp 样式覆盖处理
微信小程序官方文档中说明,需要将 app.json 中的 “style”: “v2” 去除,因为小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
{
"style":"v2", // 删除此行
"sitemapLocation": "sitemap.json"}
自定义组件中需要覆盖vant 样式时需要如下设置:
Component({
/**
* 组件的属性列表
*/
properties: {
},
options: { styleIsolation: 'shared', }, // 重点在这!!!
})
上一篇: 如何使用 PHP 开发简单的在线问卷功能
下一篇: 如何从问卷星赚钱(如何从问卷星赚钱)
推荐阅读
-
微信小程序音频视频下载(fiddler grab) - 工具->选项->连接
-
太郎下一代架构揭秘 | GMTC《小程序跨框架开发的探索与实践》万言书
-
uniapp 微信小程序开发误区日记:由于图表数据渲染不出来,第一次使用手表功能在项目中监听数据变化
-
微信小程序开发实践记录
-
宠物护理师微信小程序 - 开启报告分享
-
微信小程序转为应用程序并在应用程序市场上架
-
微信小程序网络视图与小程序通信
-
开发微信小程序,提供一站式体育服务
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
微信小程序现场认证