设置tabBar、使用第三方插件和自定义组件使用简单实例
创建小程序项目进入时填写,因需要用上第三方插件,所以要填上开发者的APPID,前往微信公众平台去注册一个账号获取APPID,在设置=>开发设置可以查看相关appid信息
简单思路
底部导航添加三个子集,每个子集指向相应的页面,两个插件页面,一个自定义组件页面
一、设置tabBar
1、找到app.json设置tabBar,若没有找到tabBar,自己添加并刷新
下面的tabBar是常见的写法
"tabBar":{
"color":"black",
"selectedColor":"#1afa29",
"borderStyle":"black",
"backgroundColor":"#fff",
"list":[
{
"pagePath":"pages/weather/weather",
"iconPath":"img/weather.png",
"text":"天气",
"selectedIconPath":"img/weather.png"
},
{
"pagePath": "pages/book/book",
"iconPath": "img/book.png",
"text": "阅读",
"selectedIconPath": "img/book.png"
}
]
}
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色 | |
selectedColor | HexColor | 是 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 是 | tab 的背景色 | |
borderStyle | String | 否 | black | tabbar上边框的颜色, 仅支持 black/white |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最多5个 tab | |
position | String | 否 | bottom | 可选值 bottom、top |
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字 |
iconPath | String | 是 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px |
selectedIconPath | String | 是 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px |
注意项
1:必须保证tabBar["list"]里的所有子集属性pagePath在pages都能找到,而且list第一个子集属性pagePath值和pages第一个子集值保持一致,否则的话,整个底部导航都不出现
2:跳转页面需要注意,使用跳转方法不恰当会导致跳转失效(页面路径填写需注意、细心)
用组件<navigator url="tabBar页面路径"></navigator>、方法wx.navigateTo({url:"tabBar页面路径"})、wx.redirectTo({url:"tabBar页面路径"})去跳转到tabBar的某个页面,这是会啥鸟动静都没有的,要想跳转到tabBar的页面,有专门的跳转方法wx.switchTab({url:"tabBar页面路径"}),只会跳转到tabBar页面,非tabBar页面则失效;当然,也可以直接用wx.reLaunch({url:"路径"}),只要地址填写正确,任何页面都能跳转。每一种跳转方法都有它的特点,某某总结一下
- wx.navigateTo(Object):在当前窗口跳转非tabBar的页面,可倒回上一个页面
- wx.redirectTo(Object):关闭当前页面,在当前窗口跳转非tabBar的页面,不能倒回
- 组件<navigator>:由属性决定其特点,例如改变属性redirect值(<navigator url="路径">点击跳转不关闭当前页面、<navigator url="路径" redirect=“true”>点击跳转关闭当前页面)
- wx.switchTab(Object):只能跳转有tabBar的页面
- wx.reLaunch(Object):关闭所有页面,打开到应用内的某个页面。带tabBar页面路径不能带参数,非tabBar页面可带参数
二、使用第三方插件
1、前往微信公众平台,登入账号密码,找到设置=>第三方服务=>插件管理,例:某某添加了“天气预报”和“微信读书”这两个插件,审核速度快的把你的老婆都换了,就它两了
2、添加成功后,点击插件的详情,查看开发文档,要想使用第三方插件,必须知道这些信息:appid、版本号、usingComponents组件名
某某查看插件“附近”的详情,得到appid、版本号、组件名这些信息
3、找到app.json,设置plugins,例:添加插件“附近”,名字取“nearBy”,version为版本号,provider为插件appID
设置完成后,在小程序编辑器找到“详情”按钮,某某的是右上角找到详情的,查看下插件有没有添加成功,如果没有的话,控制台会报出“无特权使用插件”的相关错误
4、添加成功后,开始在应用页面上使用插件了,找到应用页面的json,例子:
某某找到near.json,设置usingComponents,随便取个名叫“near-by”,“nearBy”是指app.json那里添加上的名字,group是指插件必要三大信息那里得到的,代码如下:
"usingComponents":{
"near-by":"plugin://nearBy/group"
}
然后在near.wxml添加自定义组件near-by
插件“附近”完成后,以同上做法去添加插件“城市选择”,相信添加完毕后,保存刷新,有错的找错,解决不了的找百度,或者在下面评论问某某也是可以
三、自定义组件
1、创建文件夹为list,在文件夹list中创建component(注意:鼠标移到list,点击右键,进入新建,选择component键),list.json文件将 component
字段设为 true
才可以为自定义组件使用,否则无效
list.json
{
"component": true
}
list.wxml
<text class="red">
我是自定义的组件
</text>
<text class="red">
我是自定义的组件
</text>
<text class="red">
我是自定义的组件
</text>
list.wxss
.red{
color:red;
font-weight:;
}
还有需要注意的list.wxss中不应该使用ID选择器、属性选择器和标签名选择器
2、开始在应用页面使用自定义组件了,例:custom文件夹
custom.json(随便定义组件名,某某取my-list,然后填写路径)
{
"usingComponents": {
"my-list": "../../list/list"
}
}
custom.wxml
<my-list />
刷新吧,到这里就应该结束了,没有结束的话,就是过程中发生了错误或者某某写的还是不完善,够乱,也罢,有错的找错,解决不了的问百度,有耐心的也可以评论问
要源代码的,在这:https://github.com/murenziwei/wxTest
设置tabBar、使用第三方插件和自定义组件使用简单实例的更多相关文章
- pycharm设置安装python第三方插件
pycharm设置安装python第三方插件 转载于:https://www.mindg.cn/?p=80 今天下了一个pycharm,设置用它来安装python插件,以下是安装步骤,与大家分享,我的 ...
- Android自定义组件之简单组合
Android自定义控件有两种,一种是组合.比如一个linearlayout 里面有textview,imageview. 这样的好处是,写一个就可以多处使用. view_image_and_butt ...
- Django rest-framework框架-认证组件的简单实例
第一版 : 自己写函数实现用户认证 #models from django.db import models #用户表 class UserInfo(models.Model): user_type_ ...
- 如何在小程序自定义组件和动态传入数据小demo
在开发过程中,我们会将页面常用功能抽象为一个组件,这样既方便又可以避免代码冗余.小程序中也提供了自定义组件,了解Vue的伙伴们会发现其实和Vue的组件化很相似.这里用返回顶部功能来说说如何自定义组件, ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- 带坑使用微信小程序框架WePY组件化开发项目,附带第三方插件使用坑
纯粹用来记录wepy及相关联内容,以防再犯~ 1. 接手的wepy项目版本是 1.7.2 ,so我没有初始化的过程.... 2. 安装wepy命令工具,npm install wepy-cli -g ...
- 设置tabbar的角标与第三方库Masonry的基本使用
// 设置tabbar的角标 [[[[[self tabBarController] viewControllers] objectAtIndex: 0] tabBarItem] setBadgeVa ...
- tabBar中tabBarItem选中颜色自定义设置
1.在storyBoard中,选中tabBarController,设置tabBar中KeyPath中的(selectedImageTintColor)如图 2. 直接代码设置 tabBarContr ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
随机推荐
- shell工具-awk
awk 一个强大的文本分析工具,把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行分析处理. 基本用法 awk [选项参数] 'pattern1{action} pattern2{act ...
- 冲刺博客NO.4
今天开站立会议时,有一点分歧,原本我认为的隐私保护和其他人认为的不一样,在沟通后这部分功能达成共识. 今天做了什么:组员完成了用户输入部分,信息输入.添加了一些组件和活动完善界面. 遇到的苦难,界面 ...
- html,css,jquery,JavaScript
1.全选 (当点击checkall按钮时,选中所有checkbox用prop全选上)function checkAll() { $(':checkbox').prop('checked', true) ...
- Linux Buffer/Cache 的区别
以前经常使用free -h命令来查看当前操作系统的内存使用情况,同时也注意过返回信息中有一列是buff/cache,来公司之前,面试官还问过我这两个的区别,当时没有回答出来,现在特意回顾记录下: ...
- 二、RHCSA试题解析
一.设置YUM仓库 YUM的软件库源地址为:http://content.example.com/rhel7.0/x86_64/dvd,将此配置为操作系统的默认软件仓库. 方法一(修改配置文件): v ...
- 如何获取 docker 容器(container)的 ip 地址
1. 进入容器内部后 cat /etc/hosts 会显示自己以及(– link)软连接的容器IP 2.使用命令 docker inspect --format '{{ .NetworkSetting ...
- c# 数据写入三菱PLC
public void Data_Write_Value(int[] m_write_data) { int lSize = 2; string[] Address ...
- 17_python_成员
一.类成员 1.字段 class Province: country = '中国' # 实例 (静态) 字段:类变量. 不属于对象, 对象可以访问 def __init__(self, name): ...
- Linq to xml修改CDATA节点值
增加节点时,我们是这样写的: xop.Document.Element("messages").Add( new XElement("message", new ...
- css经典布局—Sticky footers布局
参考:http://www.w3cplus.com/CSS3/css-secrets/sticky-footers.html 效果:将footer固定到底部.文章内容不足满屏时 footer在底部,超 ...