前端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.message
      this.comments = data.comments
    })

改造后

    onLoad(options) {
        // 获取页面参数
        const id = options.id
        this.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.message
                        this.comments = data.comments
                    } else {
                        uni.showToast({
                            title: data.msg || '加载失败',
                            icon: 'none'
                        })
                    }
                },
                fail: (err) => {
                    uni.showToast({
                        title: '网络错误',
                        icon: 'none'
                    })
                },
                complete: () => {
                    uni.hideLoading()
                }
            })
        }
    }
}