首页 > 编程语言 >微信小程序转换成uniapp项目

微信小程序转换成uniapp项目

时间:2023-09-19 16:24:00浏览次数:50  
标签:uniapp 插件 转换 微信 miniprogram 程序转换 https 页面

1. 把微信小程序转换成uniapp项目

1.1 安装miniprogram-to-uniapp 插件

打开cmd,运行【 npm install miniprogram-to-uniapp -g 】进行安装,因为这个包是工具,要求全局都能使用,所以需要-g进行全局安装。

npm install miniprogram-to-uniapp -g

如果运行npm报错,请先安装Node.js,下载地址:https://nodejs.org/zh-cn/

1.2 查看是否安装成功

wtu -V

1.3 其他方式及文档

1. GitHub开源地址:https://github.com/zhangdaren/miniprogram-to-uniapp

2. uni-app官网:https://uniapp.dcloud.net.cn/

3. DCLOUD提供的插件市场配合HBuilderX使用:https://ext.dcloud.net.cn/plugin?id=2656

4. miniprogram-to-uniapp插件使用介绍:https://ask.dcloud.net.cn/article/36037

2. 使用插件进行转换(转换完成会在同目录下生成:文件名_uni 的文件夹)

2.1  注意事项

每次转换时都会将输出目录清空,可能导致代码丢失,请注意代码备份/保存!!!!!!!

因为这种转换非100%,所以转换之后需要手动更改部分代码!!!

2.2 开始转换

打开cmd,输入【wtu -i "你的小程序项目路径"】

wtu -i "你的小程序项目路径"

2.3 转换可能需要更改的地方

1. js部分

1.删除 const app = getApp();

2.以 wx. 开头的方法更新为 uni. 开头

3.数据绑定 this.setData({ a : 1 }) 更新为 this.a = 1

4.路由跳转 wx.navigateTo()  更新为uni.navigateTo()

5.onLoad(options)
通过options或this.$Route.query获取页面传递参数

6、部分页面生命周期释义,详见页面生命周期
onPullDownRefresh:监听用户下拉动作,一般用于下拉刷新
onReachBottom:页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据
onShareAppMessage:用户点击右上角分享
onPageScroll:监听页面滚动

 

2. templete

以下几条不影响使用,改不改都行

<block>标签可能是小程序<block>标签或templete模版转换生成的,有的页面转完后可能有多层<block>嵌套的情况,不影响使用,但是不代码太美观,修改的话<block> 标签替换为 <templete> 标签,样式估计也需要调整
页面事件 
例如 <view @tap="clickBtn" data-id="id">点击</view> ,页面转换完使用没问题,但是和平常开发vue不一样,
更新的话可以改为<view @click="clickBtn(id)">, 在修改对应方法即可
引入wxs的页面 <script module="utils" lang="wxs" src="./utils.wxs"></script> 大部分方法可改为 computed、watch,=

 

3. css部分

css转换可能失败,大部分是单位转换失败,原px乘2,改为rpx即可
盒子模型的问题(小程序默认content-box,uniapp默认样式border-box),修改box-sizing即可



标签:uniapp,插件,转换,微信,miniprogram,程序转换,https,页面
From: https://www.cnblogs.com/liyhbk/p/17318201.html

相关文章

  • 【微信小程序】RichText(92/100)
    布局如下:<!--pages/richText/richText.wxml--><viewclass="page-section-title">通过HTMLString渲染</view><scroll-viewscroll-y>{{htmlSnip}}</scroll-view><buttonstyle="margin:30rpx0"type="primary"......
  • 【微信小程序】简洁好用的icon(94/100)
    布局<!--pages/icon/icon.wxml--><iconclass="icon-box-img"type="success"size="50"></icon><viewclass="icon-box-title">成功</view><iconclass="icon-box-img"type="info......
  • 9-微信小程序的网站的接口调用(直接调用)
    微信小程序除了在第三方调用接口,还可以直接从网站调用接口,但是每个网站都有保护措施,所以要寻找那些没有防护的,可以来直接调用的网站。 案例:豆瓣电影的接口调用1.百度豆瓣电源,找寻需要调用的页面 2.右键检查,或F12 3.回车,再次发起请求,查看网站接口 微信小程序作为新兴......
  • 基于微信的垃圾分类小程序
    现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本垃圾分类小程序就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软件工具可以帮助管理人员提高事务处理效率,达到事半功倍......
  • 8-微信小程序的网站的接口调用
    案例:查询天气预报1.需要使用到的接口网址,在百度搜索聚合数据:https://www.juhe.cn/  聚合数据是一个请求接口的网站 准备工作做好后,就开始打开微信小程序编译器wxml:<view class="top" >    <text>查看天气预报</text></view><form bindsubmit="submit" >......
  • 7-微信小程序 tabBar导航栏
    微信小程序tabBar是小程序底部的一个导航栏,用于在不同的页面之间进行切换。下面是一个示例代码,展示如何在微信小程序中使用tabBar。在小程序的app.json文件中,添加tabBar配置项,示例代码如下:"tabBar": {      "color":"#ccc",    "list": [{      ......
  • vue3版的uniapp在路由这块有好的方案吗?
    在Vue3版本的uni-app中,你可以使用VueRouter进行路由管理。VueRouter是Vue.js官方提供的路由解决方案,可以方便地实现单页面应用的路由功能。以下是一些在Vue3版的uni-app中使用VueRouter的好的方案:安装VueRouter:首先,在你的uni-app项目中安装VueRouter。可以使用npm或yarn来安......
  • 微信小程序倒计时后功能操作
    实现倒计时功能可以使用定时器和setData方法来更新页面上的倒计时数据。这样,页面就会显示一个从60开始递减的倒计时。你可以根据自己的需求修改初始值和倒计时结束后的处理逻辑。在小程序页面的js文件中Page({data:{countDown:60//倒计时初始值},onLoad:functi......
  • H5调用微信js支付 和 支付宝js支付
    微信的 首先引入<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>payment(obj){//微信的支付winWeixinJSBridge WeixinJSBridge.invoke( "getBrandWCPayRequest",{ appId:obj.appid,//公众号名称,由商户传入 ......
  • Python 之 "红包来了,红包来了"微信抢红包提示
    "红包来了,红包来了"用了抢红包神器之后,我再也没有漏过一个红包拉~(功能逆天,春节必备)'''Function: 微信红包提示'''importitchatimportpygame'''提示'''defalarm(): pygame.mixer.init() pygame.mixer.music.load('alarm.mp......