renderjs

主script与ECharts script 数据不互通。在主script data中定义option，option与ECharts容器view 的 prop参数进行绑定，change:prop属性绑定ECharts script中的updateEcharts()方法，进行option数据改变监听。

在 Vue 中我们就知道，如果数据预先未定义，则无法被监听到，因此在 option 中的数据即使为空也要赋予空值。

二次封装，父子组件交互

https://www.jianshu.com/p/6b749b6cc281

返回上一页面时携带当前页面值

方式一

  • 当前页面给返回页面相关参数赋值

    1. // 返回页面前将上一级页面的项目值传过去
    2. let pages = getCurrentPages()
    3. let prevPage = pages[pages.length - 2]  // 上一页面
    4. if (prevPage) {
    5. prevPage.$vm.someValue = item  // someValue必须已在上一页面中定义过，如在data中定义过
    6. }
    7. uni.navigateBack()

  • 返回页面获取值

    onShow() {
console.log(this.someValue)
}

    方式二

    利用全局触发和监听事件传值

  • 当前页面

    methods:{
  goBack() {
    if (this.keyword) {
      uni.$emit('updateKeyword', this.keyword)
      this.$Router.back()
    } else {
      uni.showToast('请输入内容')
    }
  }
}

  • 返回页面

    onShow() {
let that = this

// 监听事件携带的参数
uni.$on('updateKeyword', function (data) {
  that.keyword = data
})
this.bindData()
}

    原生导航栏自定义按钮

    按钮默认定义在导航栏右侧，依照 buttons 中定义的顺序排列，相关文档查阅：https://uniapp.dcloud.net.cn/collocation/pages?id=app-titlenview-buttons

    {  
  "path" : "nav-dot/nav-dot",  
  "style" : {  
      "navigationBarTitleText" : "导航栏带红点和角标",  
      "app-plus" : {  
          "titleNView" : {  
              "buttons" : [  
                  {  
                      "type" : "favorite"
                  },  
                  {  
                     "type" : "share"
                  }  
              ]  
          }  
      }  
  }  
}

    监听按钮事件：

    export default {  
  data() {  
      return {}  
  },  
  onNavigationBarButtonTap : function (e) {
  console.log(e);
  // e的返回格式为json对象：{"text":"测试","index":0}
  }
}

    网络请求

    使用 luch-request 库

  • 处理 get 请求时参数含有空格会被转为加号：

    http.interceptors.request.use(
config => {
  // 处理 GET 请求时的”空格转为加号“问题
  let url = config.url
  if (config.method === 'GET' && config.params) {
    url += '?' // 拼接参数
    // 获取所有参数，通过循环 拼接所有参数，encodeURIComponent对参数编码，
    Object.keys(config.params).map(key => {
      url += `${key}=${encodeURIComponent(config.params[key])}&`
    })
    url = url.substring(0, url.length - 1) // 删除最后一个&字符
    config.params = {} // 参数已经存在于 url中
  }
  config.url = url
})

    下拉刷新

    配置 pages.json

    开启下拉刷新

    "pages": [
{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "列表",
    "enablePullDownRefresh": true
  }
}
]

    自定义刷新图标颜色

    "pages": [
{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "列表",
    "enablePullDownRefresh": true,
    "app-plus": {
      "pullToRefresh": {
        "support": true,
        "color": "#0055FF"
      }
    }
  }
}
]

    页面调用下拉方法

    因为下拉刷新不会停止，所以最后一定要用 uni.stopPullDownRefresh() 阻止下拉刷新

    onPullDownRefresh() {
this.status = 'loading'
this.pageNo = 1
this.list = []
uni.stopPullDownRefresh()
}

    测试版和正式版并存

    修改打包时的包名和manifest.json中的appid

    背景色

    设置单个页面的背景色

    <style>
page {
  background-color: #f5f5f5;
}
</style>

    一定要将此配置放在style标签内，scoped真机是不会生效的。

    微信小程序

  1. 先登录https://mp.weixin.qq.com/申请APPID，填入 manifest.json的微信小程序配置中，否则运行微信开发者工具会报错
    TypeError: Cannot read property 'forceUpdate' of undefined
 at VM194 WAService.js:2
 at VM194 WAService.js:2
 at c (VM9 asdebug.js:1)
 at l (VM9 asdebug.js:1)
 at VM9 asdebug.js:1
 at Set.forEach (<anonymous>)
 at f (VM9 asdebug.js:1)
 at e.exports.g (VM9 asdebug.js:1)
 at VM9 asdebug.js:1
 at Set.forEach (<anonymous>)(env: Windows,mp,1.05.2204250; lib: 2.17.0)

    参考