导航:navigator 组件

  组件上的属性:

    target:跳到其他小程序( 默认是当前小程序 ),当属性值为 miniProgram 时,跳到别的小程序(如果要跳到别的小程序,需要填写 appid 属性,属性值: 别的小程序的 id)

    open-type:类型  字符串  打开方式

      属性值:navigate(默认)  url 属性后面可以带参数,跳转后的页面,左上角有个返回键,可以返回到开始那个页面

          redirect  url 属性后面可以带参数,关闭了当前页面,跳转后的页面左上角无返回键

          switchTab  url 属性后面不可以带参数,只跳转 tabBar 页面路径,否则无效,关闭当前页

          reLaunch  需要跳转应用内的页面路径,路径后面可以带参数

    url:类型  字符串  要跳转的页面路径 后面通过 open-type 属性 判断带不带参数 要携带的参数  ?name='zhang'&age=20 这种写法

    页面的参数在 要跳转的页面 Page({})  onload()  方法的属性上面,形参 options 上面

  自定义组件:component(组件)  跟pages同目录  创建 component 目录

  特点:1.每个自定义组件都有四个部分组成  wxml  wxss  js  json

    配置 文件为 component 文件

    里面的组件设定样式:只能使用 class 选择器

         json 文件中   设定属性  component:true

    要在开发者工具上面创建组件

    框架的方式就是为了组件   

  这样的话,自定义组件就配置好了,我们想在页面中引用这个组件

  需要在当前页面中 json 文件上 用 usingComponents 属性上  属性名(代表组件名):属性值(组件路径)

  在 wxml 文件中使用 组件名即可调用

  slot 插槽

  为什么要使用 slot 插槽?

    因为在我们使用自定义组件时,我们便不能够在自定义组件里面添加内容,为了解决这个问题,我们使用插槽  slot 组件,slot 组件 必须是 自定义组件内部的子节点。

    插槽就是自定义组件,内部的子节点

  slot 用法:

    自定义组件 json 文件

    

    自定义组件的 wxml 文件:

    

    定义插槽,在自定义组件中,都有唯一的 name 属性与使用组件中的子节点进行匹配,多个 slot 插槽,须在自定义组件 js 文件中 添加 options 属性

    自定义组件的 js 文件:

    

  自定义组件的 就配置好了,当前页面的引用:

  当前页面的 json 文件

  

  当前页面的 wxml 文件

  

  最后的效果图:

    

  小程序不支持背景图

  小程序中内敛组件 text 组件

  小程序可以使用 弹性布局

  padding 撑法:如图:

    

      

微信小程序 导航(a 连接)自定义组件的更多相关文章

  1. 微信小程序学习笔记四 自定义组件

    1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...

  2. 微信小程序入坑之自定义组件

    前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本 ...

  3. 微信小程序各类型的自定义组件篇

    由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:ht ...

  4. 适用于 Mpvue 的微信小程序富文本解析自定义组件

    废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxP ...

  5. 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...

  6. 小程序-文章:微信小程序常见的UI框架/组件库总结

    ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...

  7. 微信小程序-导航 & 路由

    微信小程序-导航 & 路由 页面跳转 页面路由 页面栈, 框架以栈的形式维护了当前的所有页面. https://developers.weixin.qq.com/miniprogram/dev ...

  8. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  9. 自定义微信小程序导航(兼容各种手机)

    详细代码请见github,请点击地址,其中有原生小程序的实现,也有wepy版本的实现 了解小程序默认导航 如上图所示,微信导航分为两部分,第一个部分为statusBarHeight,刘海屏手机(iPh ...

  10. 微信小程序(18)-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

随机推荐

  1. cs244a-Introduction to Computer Networking-Unit1

    Unit 1 学习目标: how an application use the Internet The structure of the Internet:The 4 layer model The ...

  2. Jquery复习(五)之append()、appendTo()、prepend()、prependTo()、after()、before()易忘点

    添加元素的方法 append().appendTo().prepend().prependTo().after().before() 通过 append() .appendTo().prepend() ...

  3. Hack the box: Bastion

    介绍 目标:10.10.10.134 (Windows) Kali:10.10.16.65 In conclusion, Bastion is not a medium box. But it wou ...

  4. npm工作流 与webpack 分同环境配置

    npm:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html process.env.npm_lifecycle_event process. ...

  5. 2019-11-29-dotnet-获取指定进程的输入命令行

    title author date CreateTime categories dotnet 获取指定进程的输入命令行 lindexi 2019-11-29 08:35:11 +0800 2019-0 ...

  6. QQ第三方登陆

    第一步 引入第三方登陆类,实例化,调用类中方法getInstance()跳转到授权页面 第二步 登陆成功的回调方法,qq_return则是登陆成功会获取到的数据的处理方法 qq_return方法: 本 ...

  7. Tensorrt之tf-trt

    使用python接口, 另外一种方式就是使用tf-trt,优化后的模型还是pb.优化的过程主要是一些层的合并啊之类的,加速结果不是特别明显,测了两个网络, 加速了10%的样子.优化后仍是pb,因此可以 ...

  8. CreateRemoteThread

    CreateRemoteThread是一个Windows API函数,它能够创建一个在其它进程地址空间中运行的线程(也称:创建远程线程)..

  9. DP+滚动数组 || [Usaco2007 Nov]Telephone Wire 架设电话线 || BZOJ 1705 || Luogu P2885

    本来是懒得写题解的…想想还是要勤发题解和学习笔记…然后就滚过来写题解了. 题面:[USACO07NOV]电话线Telephone Wire 题解: F[ i ][ j ] 表示前 i 根电线杆,第 i ...

  10. ZROI 19.07.31 AB班ACM

    写在前面:非常感谢cjc和djh两位神仙带我,非常感谢他们给了我一次躺赢的机会. 虽然我被硬点成了代码手,但我写的基本每次都有一堆罚时.然而djh爷全部1A,tql. 题目按照一血时间升序,大致符合难 ...