精华内容
下载资源
问答
  • 微信小程序标签

    万次阅读 2018-07-04 10:17:12
    除了官方公布的小程序的组件之外,有一些标签比如,span、em、strong、b也是支持的,只是官方并不推荐使用。 浏览器内核 在iOS平台上,微信的浏览器渲染内核是wkwebview; 而在Android平台上,微信则采用了腾讯QQ...
    1、view
    div和view都是盒模型,默认display:block。
    盒模型在布局过程中,一般推荐display:flex的写法,配合justify-content:center;align-items:center;的定义实现盒模型在横向和纵向的居中。
    2、text
    除了text文本节点以外的其他节点都无法长按选中。。
    截止到0.10.102800的开发者工具text支持嵌套text,不过有class的text会被面板过滤,样式不影响。
    * 友情提示!
    3、 icon
    icon可以直接用微信组件默认的图标,默认是iconfont格式的,从WeUI那边沿袭过来的一种做法。
    自定义的icon推荐svg sprite格式或者iconfont。
    目前来看,市面上还没有很好的自动合并单个svg为svg sprite的工具,需要手动拼图。
    4、input
    input 的类型,有效值:text, number, idcard, digit, time, date 。
    input不需要设置line-height或padding来纵向居中,默认placeholder的文字是居中的。
    小程序把checkbox和radio都单独做成了组件,默认的input只支持输入文本。
    上传文件在小程序里需要调用chooseImage事件完成;
    小程序CSS里的 :focus 不生效,需要修改placehoder的样式,通过placeholder-class=”class”来定义。
    .login .input-group input::-webkit-input-placeholder {
    color: #c0c0c0;
    }
    .login .input-group input:focus::-webkit-input-placeholder {
    color: transparent;
    }
    5、picker
    picker默认支持普通、日期和时间三种选择器。
    picker通过bindchange事件来调取range中自定义的数据数据,并展示到页面中,调用的是系统原生的select。
    这里小程序废弃了select组件,考虑到的是这个组件的交互不适合移动场景,最终用picker代替了。
    选择 北京 上海
    {{area[index]}}
    Page({
    data: {
    area: ['中国', '美国', '巴西', '日本'],
    }
    })
    6、 navigator
    navigator支持相对路径和绝对路径的跳转,默认是打开新页面,当前页面打开需要加redirect;
    navigator仅支持5级页面的跳转;
    navigator不可跳转到小程序外的链接地址;
    登录页
    在小程序开发工具里,默认打开新页面,工具左上角有返回按钮。加上redirect,当前页打开,不出现返回按钮。
    7、image
    小程序的image与HTML5的img最大的区别在于:小程序的image是按照background-image来实现的。
    默认image的高宽是320*240。必须通过样式定义去覆盖这个默认高宽,auto在这里不生效。(开发者说这样设置的原因是:如果设置 auto ,页面布局会因为图片加载的过程有一个闪的现象(例如高度从 0 到 height ),所以要求一定要设置一个宽度和高度。)
    最新的api支持获取图片的高宽。不过这里返回的高宽是px单位,不支持屏幕自适应;
    图片包括三种缩放模式scaleToFill、aspectFit、aspectFill和9种裁剪模式,三种缩放模式的实现原理对应如下:
    scaleToFill{
    background-size:100% 100%;//不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
    }
    aspectFit{
    background-size:contain;//保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
    }
    aspectFill{
    background-size:cover;//保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    }
    8、button
    额外补充下button的实现方式,button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值。不过这个应该会在最近的开发者工具中修复。
    button::after {
    content:" ";
    width:200%;
    height:200%;
    border:1px solid rgba(0, 0, 0, 0.2);
    }
    小程序不支持button:active这种样式的写法,button的点击态通过.button-hover{}的样式覆盖,也可修改hover-class为自定义的样式名。
    9、css3动画
    最新版的开发工具已经支持transition和keyframes动画,不用js苦哈哈的写动画队列了。
    除了官方公布的小程序的组件之外,有一些标签比如,span、em、strong、b也是支持的,只是官方并不推荐使用。
    浏览器内核
    在iOS平台上,微信的浏览器渲染内核是wkwebview;
    而在Android平台上,微信则采用了腾讯QQ浏览器2016年4月份发布的X5内核(blink内核)作为渲染引擎。
    在小程序的开发工具上,小程序的JavaScript是运行在chrome内核(nwjs)中。
    展开全文
  • 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)
  • 微信小程序标签上的data-hi属性是什么?还有没有其他data-XX的属性? 还有微信不能使用DOM操作要怎么增删改查元素和元素属性的值?
  • 微信小程序标签栏tabBar

    万次阅读 2017-01-13 15:40:12
    微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下: "tabBar": {  "color": "black",  "selectedColor": "red",  "borderStyle": "black",  "backgroundColor": ...

    微信小程序主页面大部分都定义了底部标签栏,定义一个标签栏只需要在app.json里做声明即可,代码如下:

    "tabBar": {
        "color": "black",
        "selectedColor": "red",
        "borderStyle": "black",
        "backgroundColor": "gray",
        "position": "bottom",
        "list": [
          {
            "text": "首页",
            "pagePath": "pages/index/index",
            "iconPath": "image/wechat.png",
            "selectedIconPath": "image/wechatHL.png"
          },
          {
            "text": "我的",
            "pagePath": "pages/mine/mine",
            "iconPath": "image/wechat.png",
            "selectedIconPath": "image/wechatHL.png"
          }
        ]
      }

    上面这段代码position设置为bottom,即为默认属性,展示在页面的底部,截图如下:

    若把position设置为top,状态栏即展示在小程序页面顶部,位于toolbar之下,截图如下:


    更多可参照官方文档,地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

    -------------------------------------------------------------- 官方资料----------------------------------------------------------------------------------


    tabBar

    如果我们的小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

    Tip: 通过页面跳转(wx.navigateTo)或者页面重定向(wx.redirectTo)所到达的页面,即使它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。

    tabBar 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

    属性说明:

    属性类型必填默认值描述
    colorHexColor tab 上的文字默认颜色
    selectedColorHexColor tab 上的文字选中时的颜色
    backgroundColorHexColor tab 的背景色
    borderStyleStringblacktabbar上边框的颜色, 仅支持 black/white
    listArray tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
    positionStringbottom可选值 bottom、top

    其中 list 接受一个数组,数组中的每个项都是一个对象,其属性值如下:

    属性类型必填说明
    pagePathString页面路径,必须在 pages 中先定义
    textStringtab 上按钮文字
    iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px
    selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px


    -------------------------------------------------------------- 官方资料----------------------------------------------------------------------------------

    展开全文
  • 微信小程序标签样式的优先级

    千次阅读 2018-12-16 03:02:37
    标签样式的优先级是:单独页面的id(#)样式 >app.wxss中的id(#)样式 >单独页面的class(.)样式>app.wxss中的class(.)样式 >单独页面的标签样式 > app.wxss中的标签样式 ...

    标签样式的优先级是:单独页面的id(#)样式 >app.wxss中的id(#)样式 >单独页面的class(.)样式>app.wxss中的class(.)样式 >单独页面的标签样式 > app.wxss中的标签样式

    展开全文
  • 微信小程序标签集合

    千次阅读 2019-06-14 13:46:48
    微信小程序一些常用标签与html的对应关系 html 小程序 <div></div> <view></view> <h1></h1>...<h6></h6><p></p><span></span> <view></view> <icon></icon> ...

    详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    一、视图容器(View Container):

    view 视图容器

    scroll-view 可滚动视图容器

    swiper 可滑动的视图容器

    二、基础内容(Basic Content)

    icon 图标

    text 文字

    progress 进度条

    三、表单组件(Form)

    button 按钮

    form 表单

    input 输入框

    checkbox 多项选择器

    radio 单项选择器

    picker 列表选择器

    slider 滑动选择器

    switch 开关选择器

    label 标签

    四、操作反馈组件(Interaction)

    action-sheet 上拉菜单

    modal 模态弹窗

    progress 进度条

    toast 短通知

    五、导航(Navigation)

    navigator 应用内跳转

    六、多媒体(Media)

    audio 音频

    image 图片

    video 视频

    七、地图(Map)

    map 地图

    八、画布(Canvas)

    canvas 画布

    微信小程序一些常用标签与html的对应关系

    html小程序
    <div></div><view></view>
    <h1></h1>...<h6></h6><p></p><span></span><view></view>
    <i class="icon"><icon></icon>
    <iput type="text"><input/>
    <iput type="checkbox"><checkbox/>
    <iput type="radio"><radio/>
    <iput type="file"><view bindtab="chooseImage">
    <a href="#"></a><navigator url="#" redirect></navigator >
    <img src=""><image src="" ></image >
    展开全文
  • 微信小程序标签内容的显示与隐藏

    千次阅读 2019-06-18 08:56:45
    微信小程序标签如果想隐藏该怎么办? wxml中: <input hidden="{{hidden}}" value="{{item.id}}"/> <view hidden="{{hidden}}">测试</view> Js中: data: { hidden: true, }, ...
  • 如何学习微信小程序? 学习微信小程序所需基础

    万次阅读 多人点赞 2020-03-30 16:23:19
    微信小程序作为近几年“微服务”的杰出代表,应用十分广泛。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 说的通俗一些,微信小...
  • 微信小程序-滑动标签页 说明: 实现滑动标签页功能,特色: tab滑动动画 tab滑动和内容滑动联动 数据接口: 使用本地数据 目录结构: pages — 存放项目页面文件 开发环境: 微信web开发者工具 v0.11.112301 ...
  • 微信小程序轮播图片标签 微信小程序轮播图片标签 微信小程序轮播图片标签 微信小程序轮播图片标签 微信小程序轮播图片标签
  • 做任何程序开发要首先找到...这里就是做微信小程序开发的全部官方文档。 知道了文档的位置,下面我们来介绍下如何做一个微信小程序开发: 第一步: 下载微信小程序开发者工具并安装,下载路径: https://mp.weix...
  • 转载地址:(微信小程序微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人GitHub(喜欢的还请点个Star、...
  • wechatapp-swiper-tab
  • 微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一、从网络上传入以下Json数据格式的数组 1.标题title 2.图片地址 3.数量num ...
  • 主要介绍了详解微信小程序input标签正则初体验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 只能说微信小程序是真的坑!通过navigator标签写的连接跳转无反应,原因就是要跳转的 url 最前面需要加斜杠。但是在app.json全局配置文件中配置页面路径时,前面是不允许的加斜杠的,否则报错。所以,微信小程序是...
  • 微信小程序跳转到其他网页(外部链接)

    万次阅读 多人点赞 2018-03-08 13:48:50
    个人类型和海外类型的小程序不支持 web-view 标签 也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮,跳转到百度(百度...
  • 微信小程序版豆瓣同城 概述 微信小程序版豆瓣同城(非官方出品) ...活动内容是服务器编译好的静态页面,微信小程序不支持WebView,所以活动内容中会出现网页标签。 其他 声明:非豆瓣官方出品,引用请注明出处
  • 本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码,供大家参考,具体内容如下 最近忙于一个有关数据管理的微信小程序,遇到了上图情况,虽然很简单,还是整理一下。若有错误,请广大朋友们指正。 ...
  • 微信小程序渲染html 支持的特性: 大部分的普通HTML标签(未全部测试) , <video>, <audio> , , , 等表格标签 标签转`` HTML entities 七牛图片裁剪 自定义插件 不支持<form>, ,等表单元素. 使用...
  • 10分钟入门 - 微信小程序开发

    万次阅读 多人点赞 2019-01-09 21:33:14
    注册微信小程序 如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。 接着填写...
  • 微信小程序-创客+ 说明: 实现创客➕客户端功能,特色: 图片轮播 云资源页面css动画 信息提交常用组件展示 图标列表展示 向下滚动时自动出现返回顶部按钮 标签悬浮于图片 数据接口: 使用本地数据接口 目录结构...
  • 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets) wxapp-helper 微信小程序开发助手 生成页面/组件,页面/组件模板可配置(.js, .wxml, .wxss, .json),文件名及命名风格...
  • CNodeJs-WXAPP 微信小程序版的CNodeJs中文社区 跟着潮流玩下微信小程序,用微信官方提供的开发者工具破解版做了个 CNodeJS中文社区 的小程序。 简单的实现了: 主题列表(分类查看) 主题详情(含回复) 接口地址...
  • 微信小程序,HTML转WXML。 usage: npm install html2wxml --save 或 引入src里面html2json.js/html2wxml.wxml/htmlparser.js/example.wxss到工程lib目录下; 在需要将html转wxml的地方按下添加代码; wxml: <!--按...
  • 微信小程序view标签布局

    千次阅读 2019-03-20 21:00:55
    首先微信小程序运行在谷歌里面,感觉微信官方的这个工具绝逼在谷歌浏览器上加工的,感觉有点意思,所以别被微信小程序的那套语法给忽悠住了其实感觉还是在写普通的前端页面,先说一下用的比较多的view的布局吧 ...
  • 微信小程序开发系列一:微信小程序的申请和开发环境的搭建&nbsp;一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用。 这个系列接下来的文章...
  • 主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 46,796
精华内容 18,718
关键字:

微信小程序标签

微信小程序 订阅