將小程序代碼轉成uni-app代碼

首先你可以先到uni-app的官網簡單看一下對它的介紹，本次文章的介紹是針對簡單的微信小程序來進行的轉化。

在這之前我們來看一下目錄對比

     

 

 

下面就來介紹一下轉移的步驟

1、首先你要新創建一個uniapp項目，然後在pages文件下創建一個目錄，隨便創建，你這裏和你小程序的項目名稱保持一致也是可以的。然後我這裏給一個示例：我在pages文件下新建了目錄 demo 然後在它之下創建了demo.vue 文件

<template>
</template>

<script>
</script>

<style>
</style>

2.在pages.json裏配置它的路勁信息。

"pages": [ //pages數組中第一項表示應用啓動頁，參考：https://uniapp.dcloud.io/collocation/pages
		
		{"path": "pages/demo/demo",}
],

3.接下來就可以進行轉移了

1）把小程序 .wxml 的下的佈局文件 都拷貝到 <template> 標籤下

2）把 小程序樣式文件 .wxss 樣式 都拷貝到  <style>文件下 這裏的 style 可以  加上scoped  就是隻對自己引用，防止佈局亂了 <style scoped>

3）接下來就要修改 標籤的一些屬性方法的用法了，這裏只介紹我遇到了，沒有介紹到的可以到官網進行查看。

-1.列表渲染，在小程序中這樣使用

<view class='item' wx:for="{{lesson}}" wx:key="ID" wx:for-item="item">

在uni-app中要這樣使用 是vue的用法

<view class='item' v-for="(item,index) in lessonto " :key="index">

-2.條件語句 在小程序中這樣使用

 <label id="btnCollect_40" data-id='{{item.ID}}' wx:if="{{item.iscollection}}">已收藏</label>
 <label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{{item.ID}}' wx:else>收藏</label>

在uni-app中要這樣使用  vue用法

<button v-if="item.iscollection" class="deletecolorto" type="primary" size="mini">已收藏</button>

 

-3. class的動態綁定 在小程序中這樣使用

<view class="div {{scope=='all'?'selected':''}}" catchtap='selecttype' data-type='all'>所有資料</view>

在uni-app中要這樣使用 
 

<view class='itop' :class="{kai:item.isopen}">

-4：點擊事件  在小程序中：用 bindtap

 <label id="btnCollect_40"  class='deletecolor' bindtap="collectionClick" data-id='{{item.ID}}' wx:else>收藏</label>

在uni-app中要這樣使用  @click

<view class="shareto" hover-class="shareto_on" @click='showPgFn'>

-5.向方法裏傳遞數據   在小程序中  使用data-   小程序的方法不支持直接傳遞數據

 <view class="bookimage"  bindtap='ShowResourceList' data-id='{{item.ID}} '>

在uni-app中 方法傳遞數據和 vue一樣

<view class="bookimage" @click='ShowResourceList(item.ID)'>

 

-6：組件的事件方法參考文檔對應修改  

 

4）最後一步，就是把 小程序裏的 js 寫的方法放在  script標籤下

注意 data  的應用有所不同。

-1.小程序中    想要動態改變組件   this.setData({scope:"all"})

data: {
    scope:'my',
    
  },

uni-app中： 想要動態改變組件  this.scope='all'

export default {
		data() {
			return {
				scope: 'my',
			}
		},

-2.生命週期勾子函數和小程序一樣

-3. 方法的使用，自定義的一些方法 在小程序中，這樣

 // 選擇分類
  selecttype:function(e){
    var type = e.currentTarget.dataset.type;
    this.setData({
      scope: type,
    })
    this.getlesson(type);
  },

在uni-app中這樣   注意要放在 methods  方法裏 根據實際情況進行一些修改

 // 選擇分類
  selecttype(type){
   
    this.scope: type,
   
  },

-4：頁面的跳轉以及傳參 在小程序中

 wx.navigateTo({
 url: '../tingxie/tingxie?id=' + that.data.audioID 
+ "&url=" + that.data.audiourl + "&classlist=" + 
JSON.stringify(this.data.classlist)
 + "&random=" +random_s1
 + "&readnumber=" + that.data.readnumber
  })

接收參數：示例：

onLoad: function (options) {
var url = options.url;
this.data.url = url;


}

 

 uni-app的跳轉頁面以及傳參

uni.navigateTo({
url: '/pages/tingxie/tingxie?id=' + this.audioID 
+ "&url=" + this.audiourl
 + "&classlist=" + JSON.stringify(that.classlist)
 + "&random=" + random_s1
 + "&readnumber=" + this.readnumber
});

 接收參數：

onLoad(options) {

var url = options.url;
this.url = url;
}

總結：注意一些細節，勇於解決bug。