小程序 详细

小程序界面间的跳转

**保留当前页面，只能打开非 tabBar 页面，返回时返回该页面**
wx.navigateTo({
  url: '路径地址',
})

**关闭卸载当前页面，只能打开非 tabBar 页面，**
wx.redirectTo({
  url: '路径地址'
})

**关闭所有非tabbar页面， 只能打开 tabBar 页面**
wx.switchTab({
  url: '路径地址'
})

**关闭卸载所有页面，可以打开任意页面**
wx.reLaunch({
  url: '路径地址'
})

**返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去**
wx.navigateBack({
  delta: 2  //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

小程序页面间的传参

wx.switchTab({
  url: '../todolist/todolist?id=789',
})

//或者navigator标签
<navigator url="../detail/detail?id=666">带参数去detail</navigator>  

跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对象）拿到路由跳转的参数。
onLoad(options) {
  console.log(options);
},

本地存储

（一）同步
1.存储：wx.setStorageSync('list', {age:5})
2.获取：wx.getStorageSync('list')
//本地同步缓存
syncSet(){
  console.log('这是同步缓存');
  wx.setStorageSync('sync', {content:'这是同步缓存'})
},
//本地同步获取
syncGet(){
  console.log(wx.getStorageSync('sync'));
},

（二）异步
1.存储：wx.setStorage（{ }）
2.获取：wx.getStorage（{ }）
//本地异步存储
asyncSet(){
  wx.setStorage({
    key:'async',
    data:'这是异步存储的数据',
    success(){
      console.log('异步存储');
     }
   })
},
//本地异步获取
asyncGet(){
  wx.getStorage({
    key:'async',
    success(res){
      console.log(res);
     }
   })
},

富文本处理

 this.setData({
        content: this.formatRichText(this.data.content)
})
  /**
   * 处理富文本里面的图片宽度自适应
   * 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(/\<img/gi, '<img style="max-width:100%;height:auto"');
    return newContent;

    //return html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
  },

小程序图片上传功能不成功

1、上传接口问题
2、是否在小程序后台管理upload域名备注上传接口

父子传值

子：
 this.triggerEvent('appIconEvent', _app)

父：
bind:appIconEvent='getIcon'
getIcon(e){
  e:子组件传的值
}

监听父组件传给子组件的值

  observers: {
    is_Formsave: function (val) {
      console.log('父组件的值',val)
    },
  },