前端vue2迁移至uni-app

1.确定文件存放位置

components: 继续沿用
pages: views内容移动到pages
static: assets内容移动到static
uni_modules: uni-app的插件存放位置

• 迁移前

src├─assets│  └─less├─components│  ├─common│  │  ├─CommentPart│  │  └─MessDetail│  ├─home│  │  └─Search│  ├─message│  ├─partner│  │  └─detail│  └─profile├─router├─store├─utils└─views├─home├─partner└─post

• 迁移后

src
├─components
│  ├─common           # 通用组件，可放之前的 CommentPart 和 MessDetail
│  ├─home             # 首页相关组件，可放之前的 Search
│  ├─message          # 消息相关组件
│  ├─partner          # 合作伙伴相关组件
│  │  └─detail
│  └─profile          # 用户资料相关组件
├─pages               # 存放uni-app页面
│  ├─home             # 主页
│  ├─partner          # 合作伙伴页面
│  └─post             # 帖子页面
├─static              # 放置静态资源文件，如图片、字体等
├─store               # vuex状态管理
├─uni_modules         # 放置uni-app插件
├─utils               # 工具函数
├─styles              # 样式文件，如.less或.css
└─router              # 路由配置

2.修改原先语法

• 标签和事件改动：
  • div -> view
  • @click -> @tap
• UI改动：
  • 把 vant => uni-ui
  • 下拉刷新：van-pull-refresh => scroll-view
  • 触底加载：van-list => scroll-view
  • px => rpx
• 路由相关：
  • this.$router.push -> uni.navigateTo
  • this.$router.replace -> uni.redirectTo
  • this.$router.back() -> uni.navigateBack()
  • this.$route.params.id -> onLoad的options获取
• 生命周期：
  • mounted -> onLoad/onShow
  • created -> onLoad
  • beforeDestroy -> onUnload
• 请求相关：
  • ajax -> uni.request
  • 加载状态使用 uni-load-more 组件
• 交互：
  • Toast -> uni.showToast
  • Dialog -> uni.showModal
• 页面：
  • location.reload -> navigateBack

  getCurrentPages().pop();
  uni.navigateBack({delta: 1
  })
  

store配置

// 1. 导入 store 的实例对象
import store from './store/store.js'// 省略其它代码...const app = new Vue({,store
})
app.$mount()

请求改造

改造前

    const url = HomeApis.MessDetailUrl.replace('{}', this.$route.params.id)ajax.get(url).then(({ data }) => {// console.log(data)this.message = data.messagethis.comments = data.comments})

改造后

    onLoad(options) {// 获取页面参数const id = options.idthis.loadMessageDetail(id)},methods: {loadMessageDetail(id) {const url = HomeApis.MessDetailUrl.replace('{}', id)uni.showLoading({title: '加载中'})uni.request({url: url,method: 'GET',success: (res) => {const {data} = res;if (res.statusCode === 200) {  // 假设 200 是成功状态码this.message = data.messagethis.comments = data.comments} else {uni.showToast({title: data.msg || '加载失败',icon: 'none'})}},fail: (err) => {uni.showToast({title: '网络错误',icon: 'none'})},complete: () => {uni.hideLoading()}})}}
}