使用uni-app有時需要用到微信小程序原生代碼

解析:

1. uni-app項目結構跟原生小程序的項目結構有著不一致的區(qū)別,如果說開發(fā)過程中必須要使用原生代碼,就需要把原生代碼作為組件的方式在uni-app項目中引入使用
2. 官網為了應對這一個需求,就給出了以下方法,供開發(fā)者實現(xiàn)
   • wxcomponents 微信小程序專用、qq小程序
   • mycomponents 支付寶小程序
   • swancomponents 百度小程序
   • ttcomponents 字節(jié)跳動小程序、飛書小程序
   • kscomponents 快手小程序
   • jdcomponents 京東小程序
   • 以上使用哪一個就在項目根目錄創(chuàng)建對應的文件夾

項目中所使用到的為微信小程序wxcomponents 的使用方式，如需更多的操作方式點擊此處查看

1、 在根目錄創(chuàng)建wxcomponents

• 
• 創(chuàng)建完成之后在文件夾里面創(chuàng)建原生格式的文件,所使用的資源我也不確定是不是非得在這里面,可以嘗試一下,我是直接放在里面了
• 
• index.json文件中需要配置把當前頁面當成組件

{
 "component": true,
}

• 原生的具體函數(shù)和自定義組件的生命周點擊此處查看

2、在pages下,創(chuàng)建一個需要引入原生代碼的頁面

3、 pages.json中配置組件路徑

• 配置在那個頁面中可以使用這個原生組件

"pages": [
    {
        	"path": "pages/Bluetooth/index",
        	"style": {
        		"navigationBarTitleText": "原生頁",
        		"usingComponents": {
        			"custom": "/wxcomponents/custom/index"   // 這個路徑就是引入進來的原生代碼
    			}
    		}
   	}
] 

4、 所有配置文件都已經完成了，接下來就是在2步中創(chuàng)建的頁面里面使用了

<template>
  <view>
   // 因為在pages中已經把/wxcomponents/custom/index注冊成當前也面下的組件了,
    // 所有在此頁面中直接使用就行
    <custom></custom>
    <view></view>
    // 此頁面下也是可以進行繪制的
  </view>
</template>
<script>

</script>

注意 wxcomponents中的文件需要遵守原生的書寫規(guī)范,和方法的使用
調用api需要使用wx為前綴,而非uni

附 原生代碼頁面基礎所需代碼

index.wxml

<view class="viewBox">
	<span biudtap="customMethod">{{innerText}}</span>
</view>

index.wxss

/* 需要引入scss之后才可以進行嵌套,否則就是用原生的css寫吧 */
.viewBox{
	margin-top: 200rpx;
	padding: 0 30rpx;
}
.viewBox span{
	font-size:30px
	color:#000000
}

index.json

{
// 把當前頁面注冊為組件
  "component": true,
}

index.js

// 頁面的最上方引入所需要使用的文件
import YS from '../utils/index.js'
Component({
// 這個玩意應該是傳遞參數(shù)時使用,可在wxml中直接使用
	properties: {
	    // 這里定義了 innerText 屬性，屬性值可以在組件使用時指定
	    innerText: {
	      type: String,
	      value: 'default value',
	    }
	},
	data: {
	    // 這里是一些組件內部數(shù)據(jù)
	    someData: {}
	 },
	 // 聲明周期函數(shù)
	 ready(){
	 	console.log('我執(zhí)行了')
	 },
	 methods: {
	 // 頁面中使用的方法
	    customMethod: function(){
	    	console.log('我點擊了頁面中的文字')
	    }
	 }
})

完結
更多詳細內容請移步到官方文檔查看
微信自定義組件
Component構造器
組件生命周期文章來源地址http://www.zghlxwxcb.cn/news/detail-449852.html

到了這里，關于uni-app嵌入微信小程序原生代碼的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！