微信小程序自定义顶部栏、等十个重要的常见功能总结
一、使用本机字体
二、自定义透明顶部栏
三、拨打电话
四、获取用户信息
五、动态设置图片地址
六、一键内容到剪切板,并关闭弹框提示
七、多选及重置功能:动态改变class
八、px及rpx
九、如何使用vant-ui库
十、如何使用自定义组件
10.1 封装 compontents/newsList
10.2 页面调用
一、使用本机字体
css中更改字体()font-family
.page{
font-family:Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
}
二、自定义顶部栏
- 顶部栏透明可以显示轮播图及图片:"navigationStyle": "custom";
- navigationBarTitleText:导航栏文字
- navigationBarTextStyle:标题颜色(black / white)
- backgroundColor:胶囊按钮的颜色;
- 其他配置:微信小程序导航的配置
{
"usingComponents": { },
"backgroundTextStyle": "dark",
"navigationStyle": "custom",
"navigationBarTitleText": "小程序标题",
"navigationBarTextStyle": "white"
}
三、拨打电话
callPhone() {
wx.makePhoneCall({
phoneNumber: '18600002222',
success: function () {
console.log('拨打成功')
},
fail: function () {
console.log('拨打失败')
},
})
},
四、获取用户信息
原本官方提供了API,但是新版目前版本,只能用按钮操作!直接调用API不生效,设置open-type="getUserInfo"
及bindgetuserinfo="getUserInfo"
就可获取到用户信息;
<button bindgetuserinfo="getUserInfo" open-type="getUserInfo">
微信登录
</button>
展示页可以直接使用open-data
展示,无需操作保存userInfo;
附:open-data中type 的合法值
<view class="isLogin" >
头像:<open-data type="userAvatarUrl"></open-data>
微信名:<open-data type="userNickName"></open-data>
</view>
五、动态设置图片地址
<image src="{{imgurl}}" mode="widthFix" />
Page({
data: {
imgurl: '',
},
onLoad(){
//动态获取图片地址
wx:request({
url:'http://test.json',
success (res) {
console.log(res.data)
this.setData({imgurl:res.data.imgsrc})
}
})
}
})
六、一键内容到剪切板,并关闭弹框提示
<view bind:tap="copeDownUrl" >
点击复制内容到剪切板:{{content}}
</view>
Page({
data: {
content: '',
},
// 复制链接
copeDownUrl(e) {
let info = this.data.content
wx.setClipboardData({
data: info,
success(res) {
wx.hideToast()
Toast(info + '复制成功,去浏览器下载')
},
})
},
})
wx.hideToast()
关闭原生的不好看弹框,Toast()
:自定义好看的弹框;setClipboardData
,复制内容到剪切板;wx:getClipboardData
,获取剪切板中的内容,附:官方API;
七、多选及重置功能:动态改变class
小程序和原生不同,在列表中不能通过直接操作dom来新增或者删除class,它的多选和vue中动态class类似,具体方法:
wxml
<view class="btnBox">
<view span="8" wx:for="{{ regionList }}" wx:key="id">
<button bind:tap="regionClick" data-id="{{item.id}}" class="{{item.isSelected?'actived':''}} btnItem">
{{item.name}}
</button>
</view >
<button bind:tap="resetRegion">重置按钮</button>
</view >
wxss
.btnItem {color:#000}
.actived {color:red }
js
Page({
data: {
regionList: [
{ name: '济南', isSelected: false, id: 1 },
{ name: '青岛', isSelected: false, id: 2 },
{ name: '淄博', isSelected: false, id: 3 },
{ name: '枣庄', isSelected: false, id: 4 },
{ name: '东营', isSelected: false, id: 5 },
{ name: '烟台', isSelected: false, id: 6 },
],
},
regionClick(e) {
let id = e.target.dataset.id //1.获取点击当前的id
let index = this.data.regionList.findIndex(i => i.id == id) //2.根据id,判断出所选项的索引值;
this.data.regionList[index].isSelected = !this.data.regionList[index].isSelected//3.修改选择的item中的isSelected的值;
this.setData({ regionList: this.data.regionList, })//4.更新页面的数据
},
resetRegion() {
this.data.regionList.forEach(item => item.isSelected = false)
this.setData({ regionList: this.data.regionList })
},
})
功能:循环regionList列表展示按钮,点击按钮完成选择及反选和class样式增加,点击重置按钮,取消所有选择样式,从上述代码已经可以看出,动态class的关键在于isSelected
及唯一标识符id
字段;
- wx:for="{{ regionList }}" wx:key="id":循环列表,key为id;
- class="{{item.isSelected?'actived':''}} btnItem",class的判断,三元表达式,如果isSelected == true,则被选择,增加actived的样式;
- data-id="{{item.id}}",自定义数据,用于点击后判断点击的是哪个按钮;
- regionClick,点击选择事件;
- resetRegion,重置事件,将list中每一项的isSelected设置为false;
八、px及rpx
h5中常用px,rem,vw,em,小程序来了个rpx;分辨下各自的单位;
px:像素;
rem :可以根节点html的大小来改变,默认1rem = 16px;
vw:视口宽度,将屏幕分成100份,整屏默认为100vw;
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。默认规定屏幕宽为750rpx,rpx换算px (屏幕宽度/750),如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
tips:在小程序实际应用中,当ui给你750*1200的设计图,卡尺量出来多少px就直接写多少rpx;
九、如何使用vant-ui库
我最喜欢用的小程序Ui库:vant Weapp ui库;根据快速上手即可配置;
{
"usingComponents": {
"van-search": "../../compontents/vant/search",
"van-toast": "../../compontents/vant/toast",
"van-row": "../../compontents/vant/row",
"van-col": "../../compontents/vant/col",
"van-icon": "../../compontents/vant/icon",
},
"navigationBarBackgroundColor": "#fff",
"backgroundColor": "#fff",
"navigationBarTitleText": "页面",
"navigationBarTextStyle": "black"
}
十、如何使用自定义组件
封装组件在现在的开发中很有必要的,节省很多代码;下面封装一个样式相同的展示列表:
- 在compontents文件夹中新建newsList文件夹,内部有js/wxss/wxml/json四个文件;
10.1 封装 compontents/newsList
- index.wxml,根据需求正常书写,没有特殊的要求;
<view class="container news">
<view class="tab_list_item " wx:for="{{infoList}}" wx:for-item="item" wx:key="*this">
<navigator url="{{item.path}}" hover-class="none" open-type="navigate">
<view class="tab_list_title">{{item.title}}</view>
<view class="{{tagColorClass[index]}} tag" wx:for="{{item.tag}}" wx:for-item="item3" wx:key="index">
{{item3}}
</view>
<view class="gt">时间:{{item.time}}</view>
</navigator>
</view>
<slot></slot>
</view>
index.json,设置"component": true;
{
"usingComponents": {},
"component": true
}
- index.js,设置
Component
(必须),properties
中的参数为外部调用时传入的值;
// 自定义组件
Component({
//
properties: {
infoList: {
type: Array,
},
},
//生命周期,这里可以拿到传过来的值
attached:function(){
// console.log(this.properties);
},
// 自身属性
data: {
tagColorClass: ['colorRed', 'colorGreen', 'colorYellow'],
},
})
10.2 页面调用
- json
{
"usingComponents": {
"van-search": "../../compontents/vant/search",
"news-list":"../../compontents/newsList"
},
"navigationBarTitleText": "页面",
"navigationBarTextStyle": "black"
}
- wxml,
info-list
对应的是组件中的infoList
(驼峰命名)
<news-list info-list="{{nesList}}"></news-list>
- js
Page({
data: {
nesList: [
{
title: 测试标题',
time: '2020.09.11-2021.09.18',
path: 'pages/policy-hall/policy-hall',
tag: ['山东市', '山东市市政府'],
},
{
title: '测试标题2',
time: '2020.09.11-2021.09.18',
path: 'pages/policy-hall/policy-hall',
tag: ['山东市', '山东市市政府', '以最终审批为准'],
}]
},
})
微信小程序自定义顶部栏、等十个重要的常见功能总结相关推荐
- 微信小程序 自定义顶部导航栏标题 navigationStyle
微信小程序 自定义顶部导航栏标题 单页面自定义导航栏 修改需要自定义的页面,的页面配置.json文件 全部页面自定义导航 修改公共页面配置app.json 单页面自定义导航栏 修改需要自定义的页面,的 ...
- 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
- 微信小程序自定义导航栏(带汉堡包菜单)
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值 整个导航栏的高度: ...
- 微信小程序自定义导航栏如何实现(简洁版)~内附代码
先来张效果图 实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
- 微信小程序-自定义导航栏
微信小程序-自定义导航栏 第一步 添加属性 "navigationStyle": "custom" 第二步 自定义导航栏 第二步 自定义组件 第四步 使用组件 ...
- 微信小程序自定义导航栏 navigation bar 返回键 首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件 版本号:2.0.0 作者:chen-yt github: https://g ...
- 微信小程序自定义导航栏组件
效果图 首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏 一.子组件-wxml <vi ...
- 微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更 ...
- 微信小程序自定义 顶部nav 和 底部tabbar
文章目录 一.微信小程序自定义Nav: 1.首先在小程序app.json中添加 `"navigationStyle": "custom"`来标志自定义导航栏: ...
最新文章
- Python基础教程:高阶函数和函数嵌套
- Thymeleaf提取公共页面(从实例入手,以inspinia模板为例)
- Wannafly挑战赛19
- 每个努力奋斗过的人,被不公正的际遇砸了满头包的时候,都有那么一瞬间的代入感。出生就是hard模式的人,早已经历了太多的劳其筋骨饿其体肤,再多的人为考验只会摧毁人对美好的向往。...
- vue 历史更新 功能
- 如何关闭小娜进程_Python多进程之进程间通信 - Pipe amp; Queue
- iOS开发工程师笔试题
- SQL 内置排名函数 DENSE_RANK
- cocos2d-x学习笔记07:在cocos2d-x中使用RTTI
- MapReduce操作Hbase史上最完整范例
- Day_05初始化GDT和IDT
- 关于MDT自动部署软件的一些资料
- acrobat缺少字体 adobe_PDF 字体
- 软件配置管理与 SourceSafe 使用指南
- 举个栗子!Tableau技巧(35):学做 南丁格尔 玫瑰图 Nightingale rose diagram
- 一语道破 到底什么是知识产权?
- 基于纠错编码的数字水印matlab,method robustness是什么意思
- 2010年度十大心理学发现
- 简单并查集-加边的无向图
- left join的基本用法以及on与where的区别