微信小程序转uniapp的迁移步骤及遇到的问题 一、迁移步骤把微信小程序转成uni-app，这里推荐一款【miniprogram-to-uniapp】小程序转换工具插件第一步：安装miniprogram-to-uniapp 插件在命令行里，运行【 npm install miniprogram-to-uniapp -g 】进行安装，因为这个包是工具，要求全局都能使用，所以需要-g进行全局安装。如果运行npm报错，请先安装Node.js，下载地址：https://nodejs.org/zh-cn/npm install miniprogram-to-uniapp -g第二步：查看是否安装成功继续在命令行里，运行 wtu -V，执行结果显示版本号，说明已经安装成功了wtu -V第三步：使用插件进行转换在命令行里，输入【wtu -i "你的小程序项目路径"】注意 -i 前面和后面都有空格！！！注意 -i 前面和后面都有空格！！！注意 -i 前面和后面都有空格！！！如：【wtu -i "E:zpWorkProject_selfminiprogram-to-uniapptesttest-wx-to-uni"】 ，回车后即可以在源项目同及目录得到一个后缀为_uni的目录，即转换成功。第四步：使用hbuilder X运行转换后的项目并在微信小程序编辑器查看将转换后的xxx_uni项目导入到hbuilder X，点击菜单 运行--> 运行到小程序模拟器-->微信开发者工具！（如果是使用了vant的项目，请运行到H5，vant项目转换后仅支持H5和app）然后查看转换后的项目运行到小程序，是否可以正常运行无报错！第五步：调试修改运行项目，在小程序开发者工具调试迁移页面的报错信息二、处理迁移问题根据下方迁移内容，逐一更新页面方法，修复页面报错信息，页面显示、功能运行正常即迁移完成。js部分删除 const app = getApp();以 wx. 开头的方法更新为 uni. 开头数据绑定 this.setData({ a : 1 }) 更新为 this.a = 1路由跳转 wx.navigateTo() 更新为uni.navigateTo()onLoad（options）通过options或this.$Route.query获取页面传递参数部分页面生命周期释义，详见页面生命周期onPullDownRefresh：监听用户下拉动作，一般用于下拉刷新onReachBottom：页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据onShareAppMessage：用户点击右上角分享onPageScroll：监听页面滚动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，css部分css转换可能失败，大部分是单位转换失败，原px乘2，改为rpx即可盒子模型的问题（小程序默认content-box,uniapp默认样式border-box），修改box-sizing即可三、扩展习惯vue写法来处理router路由的同学，还可以集成一个uni-simple-router插件来管理路由。使用vue-cli 创建一个新的项目,使用uni-simple-router管理路由。vue create -p dcloudio/uni-preset-vue xcxToUniapp2.打开该项目，新建页面，copy转换后的项目的代码3.运行项目即可

utils.js 计算开始日期和结束日期之间有多少天 getDateArr(day1, day2) { var getDate = function(str) { var tempDate = new Date(); var list = str.split("-"); tempDate.setFullYear(list[0]); tempDate.setMonth(list[1] - 1); tempDate.setDate(list[2]); return tempDate; } var date1 = getDate(day1); var date2 = getDate(day2); if (date1 > date2) { var tempDate = date1; date1 = date2; date2 = tempDate; } date1.setDate(date1.getDate() + 1); var dateArr = []; var i = 0; while (!(date1.getFullYear() == date2.getFullYear() && date1.getMonth() == date2.getMonth() && date1.getDate() == date2 .getDate())) { var dayStr =date1.getDate().toString(); if(dayStr.length ==1){ dayStr="0"+dayStr; } var str = "" + (date1.getMonth() + 1); dateArr[i] = date1.getFullYear() + "-" + (str.padStart(2, "0")) + "-" + dayStr; i++; date1.setDate(date1.getDate() + 1); } dateArr.splice(0,0,day1) dateArr.push(day2); return dateArr; },

控制富文本中图片大小 过滤函数formatRichText(html) { //控制小程序中图片大小 let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); return match; }); newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;'); return match; }); newContent = newContent.replace(/<br[^>]*\/>/gi, ''); newContent = newContent.replace(/\<h2/gi, '<h2 class="p46"'); newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'); return newContent; },vue、uniapp示例<view class="p34"> <rich-text class="d" :nodes="obj.con|formatRichText"></rich-text> </view>filters: { /** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style属性：max-width:100%;height:auto * 3.修改所有style里的width属性为max-width:100% * 4.去掉<br/>标签 * @param html * @returns {void|string|*} */ formatRichText(html) { //控制小程序中图片大小 let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) { match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, ''); match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, ''); match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, ''); return match; }); newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) { match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;'); return match; }); newContent = newContent.replace(/<br[^>]*\/>/gi, ''); newContent = newContent.replace(/\<h2/gi, '<h2 class="p46"'); newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'); return newContent; } }

前端js实现列表模糊查询 getTableList1(){ if(this.searchForm.order_no){ this.tableData=this.tableData.filter(item=>item.user_name.search(this.searchForm.order_no)>=0) }else{ this.getTableList(); } },

el-form数据校验不通过时滚动到对应错误位置 新建js文件 utils/index.js // el-form校验失败滚动到对应的错误位置 export function elFormErrorScrollIntoView() { // 获取第一个校验错误的元素 const element = document.querySelectorAll('.el-form-item__error')[0] // 滚动到错误元素对应位置 element.scrollIntoView({ behavior: 'smooth', block: 'center' }) }form.vue <template> <el-form ref="form" :model="form" :rules="rules"> ... </el-form> <el-button @click="submitForm">提交</el-button> </template> <script> import { elFormErrorScrollIntoView } from '@/utils' export default { data() { return { form: { ... }, rules: { ... } } }, method: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 数据校验成功 ... } else { // 数据校验失败 // 使用$nextTick的原因是，错误提示的元素是在视图更新后出现的，不使用$nextTick获取元素是undefined this.$nextTick(() => { elFormErrorScrollIntoView() }) } }) } } } </script>