分类 vue 下的文章

做app更新检测时,我想在lib.js使用uView的Http请求插件

首先我在main.js中use了uview这个UI框架。

//main.js
import uView from 'uview-ui';
Vue.use(uView);

于是我在lib.js中引入vue,实例化后,就可以使用挂载在vue上的属性和方法了

//lib.js
let vm = new Vue();
const update = function() {
    console.log('check update');
 
    vm.$u.get('/update',{
        appid:plus.runtime.appid,
        version:plus.runtime.version
    }).then(res=>{
        if(res){
            vm.$u.route({
                url:'/pages/update/update',
                animationType:'fade-in',
                params:res
            })
        }
    })
}

import Vue from 'vue'; //引入vue
export default {
    update
}

下拉事件
pages.json 将"enablePullDownRefresh"设置为true
页面内设置监听事件
onPullDownRefresh()

上拉触底事件
onReachBottom()

另 上拉加载可以用scroll-view组件@scrolltolower事件实现

父组件传值给子组件,
子组件通过props接收,
如果父组件传的值是字符串、数字、布尔值,子组件直接修改值,控制台会报错
如果父组件传的值是数组,对象,子组件直接修改值,控制台不会报错
修改之后,uni-app h5端 template 正常更新数据,app端控制台可以打印出修改后的数据,template 不正常更新数据
解决方法:将props接收过来的值,赋值给data里的变量,操作修改data数据,app端显示正常

在app.js文件非常大的时候使用,否则会影响性能

component: () => import('@/pages/home/Home')
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    },
    {
      path: '/test',
      name: 'Test',
      component: () => import('@/pages/test/Test')
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

修改config/index.js build下的 assetsPublicPath: '/' 为服务器端项目存放的目录
运行npm run build打包
将dist文件夹下文件上传服务器