百度小程序借助uniapp转微信小程序

背景：

 因业务调整需求，需要将之前做好的百度小程序转为微信小程序；过程：百度小程序   --转换-->   uniapp  --发行-->   微信小程序；

百度小程序、uniapp标签渲染不同点：

       百度小程序
       ==》
       uniapp格式
 
      1.     url="/pages/productdetail/productdetail?id={{item.id}}"
            ==>
            :url="['/pages/productdetail/productdetail?id=']+item.id"

       2.     class="{{codeClass == 'phone'?'error':''}}"
            ===>
             :class="['num-btn num-reduce',item.num>1?'':'no']"

       3.      <image mode="aspectFit" src="{{class_i == item.id?item.imgurl_h:item.imgurl}}" />
             ====>
             <block v-if="class_i==item.id">
                <image :src="item.imgurl_h" mode="aspectFit"/>
            </block>
            <block v-else>
                <image :src="item.imgurl" mode="aspectFit"/>
            </block>


       4.      <form bindsubmit="msgFrom" report-submit>
              ====>
              	<form class="form" id="formAction" @submit="formSubmit">


       5.     bindinput="setMsgcode"
             ===>
             @input="setMsgcode"

       6.  that.setData({
                proRecom:res.data.data.list
            })
            ===>
            that.proRecom = res.data.data.list;

       7.  swan.showToast({
                title:msg,
                icon:'none'
            })
            ===>
            uni.showToast({
                title:msg,
                icon:'none'
            })

       8.   <import src="../../bdParse/bdParse.swan" />
            <template is="bdParse" data="{{details}}" />
           ===>
            <rich-text :nodes="detail"></rich-text>

        9.  字符串+参数渲染： :id="'n'+item.id"
            :class="['catename',psIndex==item.id?'select':'']"

遇到问题：

1. 百度小程序中自定义组件如何转为uniapp格式的组件？

    答： 可参考： uniapp自定义组件

2. 运行报错： Cannot read property 'id' of undefined" ？

    原因： 调取了未定义的数组；

    解决： 在调取前先判断该数组是否存在；

    例： <view class="class-item" v-if="recomArr[0]" :data-id="recomArr[0].id" @click="gotoProduct"></view>

3. 连续重复跳转tabbar页面，不刷新页面，只更新数据？

   如： 快捷菜单中多次跳转到tabbar的product.vue产品分类页；

  问题：  uniapp直接调取product.vue中的onshow方法，会报 TypeError: currentPage.onshow is not a function

  解决： uniapp可识别methods中的自定义方法；

参考代码：

//  tabbar页面product.vue:
	onShow() {
            // 监听页面加载的生命周期函数
            this.selfshow();
   },
    methods: {
             selfshow:function(){
                  var that = this;
                  if(that.is_catid != app.product_id){
                      that.is_pull = false;
                      that.postProduct(app.product_id);
                      that.navding = 'n'+app.product_id;
                  }
             }
     }

//快捷菜单navigation.vue：
methods:{
    upProductId:function(e){
         var pages = getCurrentPages();
         var currentPage = pages[pages.length-1];
         app.product_id = e.currentTarget.dataset.id;
         if(currentPage.route == 'pages/product/product'){
               currentPage.selfshow(); //调取自定义方法
          }else{
               uni.switchTab({
                     url: '/pages/product/product'
               });
           }
          this.lay_show = false;
     }
}