Wepy项目转移到uniapp项目
(经过上网百度以及官网的学习、大概解决了、还有一些和服务端连接的问题没处理好)
一、 (vscode条件下实现的在hbuilderX也可以正常运行)
1.1 全局安装:npm install -g @vue/cli
1.2 通过cl创建uni-app项目:vue create -p dcloudio/uni-preset-vue my-project 后面可以选择模板,要是迁移选择默认比较好改动
1.3 安装组件语法提示:npm i @dcloudio/uni-helper-json
1.4 运行 npm run dev:%PLATFORM% %%里面可以是mp-weixin
Wepy项目转移为uniapp项目

二、uniapp中的page.json主要存放页面路径、gloabaldata、插件、分包1等信息,wepy中的app.wpy里面关于这些的可以手动迁移到page.json中
Wepy项目转移为uniapp项目 page页面配置

Wepy项目转移为uniapp项目 uniapp中 分包页面配置的格式(plugin是自己需要用到的插件可忽略)
Wepy项目转移为uniapp项目 uniapp中 tabbar页面配置的格式
三、 推荐官网的一个wepy-uniapp的转换器,可以将一些简单的wepy用法变成uniapp的vue的用法,其实第一步也可以直接用这个方法去将一的内容自动变成uniapp的格式,就是page页面需要改,因为它有点错误。但是用这个方法比自己动手去改更快
2.1安装wepy into uniapp :$ npm install wepy-to-uniapp –g
2.2升级wepy into uniapp:$ npm update wepy-to-uniapp –g
2.3转换:etu -i ./xxapp -o ./miniprogramProject_uni 其中xxapp是我的wepy项目名称, mini是转换的uniapp的名称,更多用法看官网
四、前三步骤大致解决了wepy转为uniapp的框架、三就来细扣一下代码吧
4.1 先说一个错误容易犯的(我自己容易)
Wepy项目转移为uniapp项目 此图是利用三提到的转化器转换得到的成果,这里有一个很大的问题

Wepy项目转移为uniapp项目

它比纯正的uniapp多了data,记得把return里面的data删掉,不然前端获取不到js里面的值!!!!
4.2将js里面的wepy.getstorage等方法中的wepy改为uni
4.3有的wx.showmodel的wx可以改为uni,但是有的不能改,于是博主我关于wx的都没有改成uni,这个问题待解决
4.4wepy中调用全局变量用的是this.parent,unigetApp()this.parent,然而uni调用全局变量用的是getApp(),于是需要将this.parent全部更改成getApp().globaldata的方法
4.5 wepy1.x需要this.apply()unithis.apply()去手动更新视图,然而uni不需要,可以将this.apply()删掉
4.6存放图片的文件有asset变成了static,需要把图片迁移到static里面
Wepy项目转移为uniapp项目

4.7我觉得很重要的一部分是封装,wepy用到的wepy-async-function有对应的包可以引入,然而uni并没有。于是如果你没有注意到这个点,会一直报错(res.code is not defined等等很多undefined错误都是因为没有发现这个导致的,目前是这么觉得的),封装是用的promise封装,大致格式是这样的,Wepy项目转移为uniapp项目

.和wepy的request的包引入方式没有区别:
Wepy项目转移为uniapp项目

4.8关于和后端服务器的连接有点问题,如果有人知道可以和我说一下哟!我的这个也是最近迁移的,还没有完全成功,会在更新的,有错误欢迎和我说!!!互相进步哦!然后我还在学习wepy1.x升级到2.x的,如果有人成功的,希望和我交流一下,万分感谢!!!
附:上几个学习参考的网站:

  1. http://www.zyiz.net/tech/detail-144285.html (wepy迁移uniapp实例) 2.https://blog.csdn.net/qq_39167934/article/details/106021002 (vs安装uniapp项目)
  2. https://www.npmjs.com/package/wepy-to-uniapp?activeTab=readme (wepy-into-uni官网教程)

相关文章:

  • 2021-09-27
  • 2021-11-22
  • 2021-10-29
  • 2022-01-03
  • 2021-07-24
  • 2021-12-27
猜你喜欢
  • 2021-05-15
  • 2021-10-04
  • 2021-06-20
  • 2022-12-23
  • 2022-12-23
  • 2021-05-11
  • 2021-06-25
相关资源
相似解决方案