vscode开发小程序,如何与小程序开发工具同步代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vscode开发小程序,如何与小程序开发工具同步代码相关的知识,希望对你有一定的参考价值。

参考技术A 一、首页可以用小程序开发工具先创建好项目,或者是用vscode去创建也可

二、用vscode打开创建好的项目

三、在vscode中安装几个小程序插件即可

1、搜索安装vscode weapp api,这是小程序的语法结构api

2、安装vscode wxml这个插件,主要是针对wxml文件的

3、安装vscode-wechat这个插件

4、安装一下Easy WXLESS,是针对wxss文件的

以上安装好插件之后,在vscode里面编辑小程序项目,保存即可同步到小程序开发工具中啦!

这样在vscode中也可以使用小程序的api啦~

H5与小程序数据交互

参考技术A

 功能已通过原生+vue混合开发的方式实现了,现需要将这个功能原封不动的搬到微信小程序。综合各方面评估,选择了微信小程序套webview的方式实现(若时间允许,建议还是通过小程序实现)。

 采用小程序webview的方式,可以复用大部分H5页面,但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况(当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ,但不在本文讨论范围内):
 (1) 获取照片,可通过html的input标签实现;
 (2) 获取经纬度,可通过webview的url拼接参数实现;
(3) 人脸识别,可通过H5调起刷脸小程序的方式实现。
 下面主要描述下第3种情况的实现方式。

 H5与小程序交互所涉及的数据部分主要包括两块:
 (1)H5如何将数据传给小程序?
   url参数拼接。
 (2)小程序如何将数据传给H5?
   wx.setStorage及wx.getStorage。
 详细流程如图所示。

 webview小程序pageA调起人脸小程序pageB,pageB回退到pageA。因为pageA重新设置了webview的url,其所嵌套的H5与历史H5页面无法进行数据共享,导致业务功能无法继续。解决办法就是调起人脸小程序之前,在H5页面先将必要的信息通过 localStorage.setItem 保存,人脸识别结束回到H5页面时,再通过 localStorage. getItem 获取所需要的业务数据。

以上是关于vscode开发小程序,如何与小程序开发工具同步代码的主要内容,如果未能解决你的问题,请参考以下文章

vscode开发微信小程序使用less(插件Easy WXLESS)

H5与小程序数据交互

小程序开发总结一:mpvue框架及与小程序原生的混搭开发

VSCode+微信开发者工具开发小程序遇到问题1——点击某个AtGrid不能跳转

手把手带你入坑H5与小程序直播开发

APP与小程序的区别