uniapp常用技巧

闷墩儿这只小猫咪

已于 2022-11-23 10:03:13 修改

阅读量452

点赞数

文章标签： uni-app javascript 前端

于 2022-11-17 10:32:58 首次发布

本文链接：https://blog.youkuaiyun.com/m0_65972155/article/details/127767426

版权

本文介绍了uni-app的几个常用技巧，包括如何使用scss函数、设置easycom自定义组件以及实现微信小程序的分享功能。在scss中创建mixin.scss文件并应用，通过pages.json配置easycom，为页面添加分享按钮并参照官方文档进行分享功能的具体配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一篇

scss函数的使用

创建一个mixin.scss文件

/*控制文本的隐藏*/
@mixin ellipsis($clamp:1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $clamp;
}

在组件中使用

<style rel="stylesheet/scss" lang="scss" scoped>

@import '@/assets/css/mixin.scss';//引用此混合样式
.box{
      @include ellipsis(2);
    }

</style>

easycom 自定义组件

pages.json里配置

    "easycom": { //组件化配置
		"autoscan": true, //是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
		"custom": {
			// "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
			"uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件
			"vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
		}
	}

然后用这样的格式命名文件

微信小程序分享功能

在页面中放置分享按钮

<view class="share-box">
    <button class="share" data-name="shareBtn" open-type="share"></button>
	<view class="word">分享</view>
</view>

具体配置看官方文档

分享配置文档

onLoad(){

    //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
    wx.showShareMenu({
        withShareTicket:true,
        menus:["shareAppMessage","shareTimeline"]
    })
},
//发送给朋友
onShareAppMessage(res) {
      return {
            title:"",  
            path: ``
        }
},
//分享到朋友圈
onShareTimeline(res) {
     return {
            title: '',
            type: 0,
            query: 0,
            summary: "",
            imageUrl: ""
        }
}