亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【備戰春招】第12天首頁首發新品組件開發一

標簽:
小程序

课程章节: 3-7 首页首发新品组件开发一
课程讲师: CRMEB

课程内容:
1、外部组件的引用,首先在gitee上下载vant,之后再src目录下新建wxcomponents/vant 把下载的vant 中的dist目录拷贝到当前目录下
2、第一种:页面中使用vant组件在pages.json中当前文件下新建usingCompoenents,并配置所需要的组件
pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"usingComponents": {
					"van-cell":"/wxcomponents/vant/cell/index"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

然后直接在页面中使用

<template>
 <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />
</template>


第二种:直接通过import方式引入,然后再compents中注册使用,

3、页面中直接使用就可以啦

<template>
	<view class="news-product">
		<view class="news-product-container">
			 <van-cell title="单元格" value="内容" />
		</view>
	</view>
</template>

<script>
	import VanCell from '@/wxcomponents/vant/cell/index'
	export default{
		components:{
			VanCell
		},
		props:{
			list:{
				type:Object,
				default:()=>{
					
				}
			}
		}
	}
</script>

课程收获:
这个章节主要学习了如何应用外部的UI框架,可以快速的开发所需要的页面,这节课主要学到了使用vant组件来开发文件,使用有两种方式,第一种是,在pages.json中配置usingComponents,然后再引入所需要的组件,然后再所需要的地方直接引入就可以,第二种是通过import按照组件的方式进行导入,这种方式也通用,都可以加快项目的开发

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
2
獲贊與收藏
23

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消