精华内容
参与话题
问答
  • 微信小程序开发总结

    2020-01-11 17:57:56
    标签 1、view 和div差不多 2、text 展示文字最好用这个,其他标签...自定义的icon推荐svg sprite格式或者iconfont 4、input input 的类型,有效值:text, number, idcard, digit, time, date 。 input不需要设置lin...

    标签

    1、view

    和div差不多

    2、text

    展示文字最好用这个,其他标签都不支持长按复制

    3、 icon

    icon可以直接用微信组件默认的图标,默认是iconfont格式的
    自定义的icon推荐svg sprite格式或者iconfont

    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;//保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
    }

    一丶视图容器

    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 画布

    事件

    bindtap 点击事件
    touchstart 手指触摸动作开始
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    touchend 手指触摸动作结束
    tap 手指触摸后马上离开
    longtap 手指触摸后,超过350ms再离开

    样式绑定

    <view style="color:{{color}};" />
    

    数据绑定

    <view>{{id}}</view>
    this.setData({
    	"id": 5
    });
    

    控制多个视图容器

    <block wx:if="{{true}}">
      <view> view1 </view>
      <view> view2 </view>
    </block>
    
    cover-image使用注意事项:

    使用图片尽量使用image标签,使用cover-image标签无法改变z-index,默认图片是在最上层显示。image标签和cover-image使用方法也不太一样。image是在图片上设置宽高,cover-image是在外层容器上设置宽高

    展开全文
  • 近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。 但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费。 最近研究了阿里巴巴矢量图标库的...

    近期开发多角色需求的微信小程序,对于代码包不能超过2M的微信小程序来说得把占比最大的icon图进行压缩处理。
    但是压缩处理之后效果也没有很显著,而且再次进行压缩还需要收费。
    最近研究了阿里巴巴矢量图标库的symbol使用方法。

    把图标都放进一个项目 点击symbol生成地址

    在这里插入图片描述

    优势

    1. 支持多色图标了,不再受单色限制。
    2. 标签自带size属性,也可以通过css调整样式(使用过程中,在电脑上打开微信小程序,样式会有偏)。不过不影响手机端使用。

    使用步骤

    在这里插入图片描述

    1.到你的根目录,鼠标右键,打开终端,输入 npm init -y(会多一个package.json文件)
    2.输入npm install mini-program-iconfont-cli --save-dev(会多一个node_modules,不会被上传)
    3.输入npx iconfont init 会出现help提示
    4.输入npx iconfont-wechat(会多一个iconfont.json)
    在这里插入图片描述
    5.配置iconfont.json文件,路径就是一开始项目选择的symbol的路径(以下报错代表路径错误,每次更新项目icon都需要重新获取路径)
    在这里插入图片描述
    5.页面使用
    在这里插入图片描述
    page里的json文件引用组件
    在这里插入图片描述
    wxml文件里使用组件
    在这里插入图片描述
    icon名字在iconfont文件夹里有写,阿里图标库项目组里的icon编辑里面也有显示和修改功能
    在这里插入图片描述
    实际大小,还是比之前小了很多!!!

    展开全文
  • 先让我们看一下官方文档说明: 注意:其中图标,只支持”success”、”loading” 示例代码:wx.showToast({ title: '成功', icon: 'success', duration: 2000 })接下来演示如何使用,先打开微信web开发者工具...

    wx.showToast API是显示消息提示框的作用。
    先让我们看一下官方的文档说明:
    这里写图片描述

    注意:其中的图标,只支持”success”、”loading”

    示例代码:

    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })

    接下来演示如何使用,先打开微信web开发者工具,新建快速项目,删除掉首页没用的内容,保留如下部分。
    这里写图片描述
    添加两个按钮,同事添加点击事件。再在按钮上添加navigator导航,链接到默认的日志页面。代码如下:

      <navigator url="../logs/logs">
        <button type="primary" bindtap="logbtn"> 登陆 </button>
      </navigator>
      <view class="br">
    
      </view>
      <navigator url="../logs/logs">
        <button type="primary" bindtap="morebtn"> 查看更多 </button>
      </navigator>

    index.js代码如下:

      logbtn: function () {
        wx.showToast({
          title: '登陆成功',
          icon: 'success',
          duration: 1200
        })
      },
      morebtn: function () {
        wx.showToast({
          title: '加载中',
          icon: 'loading',
          duration: 1200
        })
      },

    为了测试效果直观一些,我们在两个按钮中插入一块view标签,让两个按钮上下之间有间距。wxml代码如下:

      <view class="br">
    
      </view>

    wxss文件代码如下:

    .br{
      width: 100%;
      height: 200rpx;
    }

    最终的页面样式如下:
    这里写图片描述

    点击登陆的效果图:
    这里写图片描述
    点击查看更多的效果图:
    这里写图片描述

    如果我的文章对您有帮助,微信支付宝打赏:

    这里写图片描述
    这里写图片描述

    展开全文
  • 组件属性长度单位默认为px,2.4.0起支持传入单位(rpx/px) <view class="container"> <view class="icon-box"> <icon class="icon-box-img" type="success" size="93"></icon> <...

    1,icon 图标用法

    图标。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)

     

    <view class="container">
      <view class="icon-box">
        <icon class="icon-box-img" type="success" size="93"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">成功</view>
          <view class="icon-box-desc">用于表示操作顺利完成</view>
        </view>
      </view>
      <view class="icon-box">
        <icon class="icon-box-img" type="info" size="93"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">提示</view>
          <view class="icon-box-desc">用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息</view>
        </view>
      </view>
      <view class="icon-box">
        <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">普通警告</view>
          <view class="icon-box-desc">用于表示操作后将引起一定后果的情况;也用于表示由于系统原因而造成的负向结果</view>
        </view>
      </view>
      <view class="icon-box">
        <icon class="icon-box-img" type="warn" size="93"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">强烈警告</view>
          <view class="icon-box-desc">用于表示由于用户原因造成的负向结果;也用于表示操作后将引起不可挽回的严重后果的情况</view>
        </view>
      </view>
      <view class="icon-box">
        <icon class="icon-box-img" type="waiting" size="93"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">等待</view>
          <view class="icon-box-desc">用于表示等待,告知用户结果需等待</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="success_no_circle" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">多选控件图标_已选择</view>
          <view class="icon-box-desc">用于多选控件中,表示已选择该项目</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="circle" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">多选控件图标_未选择</view>
          <view class="icon-box-desc">用于多选控件中,表示该项目可被选择,但还未选择</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="warn" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">错误提示</view>
          <view class="icon-box-desc">用于在表单中表示出现错误</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="success" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">单选控件图标_已选择</view>
          <view class="icon-box-desc">用于单选控件中,表示已选择该项目</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="download" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">下载</view>
          <view class="icon-box-desc">用于表示可下载</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="info_circle" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">提示</view>
          <view class="icon-box-desc">用于在表单中表示有信息提示</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="cancel" size="23"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">停止或关闭</view>
          <view class="icon-box-desc">用于在表单中,表示关闭或停止</view>
        </view>
      </view>
      <view class="icon-box">
        <view class="icon-small-wrp">
          <icon class="icon-small" type="search" size="14"></icon>
        </view>
        <view class="icon-box-ctn">
          <view class="icon-box-title">搜索</view>
          <view class="icon-box-desc">www.cnmibee.com</view>
        </view>
      </view>

    </view>

    2,progress

    进度条。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)

    <view class="progress-box">
      <progress percent="20" show-info stroke-width="3"/>
    </view>

    <view class="progress-box">
      <progress percent="40" active stroke-width="3" />
      <icon class="progress-cancel" type="cancel"></icon>
    </view>

    <view class="progress-box">
      <progress percent="60" active stroke-width="3" />
    </view>

    <view class="progress-box">
      <progress percent="80" color="#10AEFF" active stroke-width="3" />
    </view>

    3,text和rich-text

    nodes

    现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node*

    展开全文
  • 目录 1 概述2 使用方法 2.1 安装2.2 开发 3 元素类型 3.1 Button3.2 Cell3.3 Dialog3.4 Progress3.5 Toast3.6 Msg Page3.7 Article3.8 ...WeUI 是一套同微信原生视觉体验一致基础样式库,由微信
  • WeUI 是一套同微信原生视觉体验一致基础样式库,为微信 Web 开发量身设计,可以令用户使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。使用方法一:使用bower进行安装bower ...
  • 但是在实际开发中并不满足。这里可以通过加image:'图片路径'。 wx.showToast({ title:"成功", icon: 'loading...',//图标,支持"success"、"loading" image: '/images/tan.png',//自定义图标本地路径,...
  • 笔记:微信小程序地图使用

    千次阅读 2018-03-01 16:46:58
    (PS:当前使用的微信开发工具版本:v1.02.1802270) marker属性中,label{} 中color和bgColor颜色值只能是十六进制,如‘#ffffff’,不支持颜色值简写‘#fff’,不支持rgba(),不支持颜色单词‘white’‘yellow...
  • A 新增 PC 微信开发版小程序自动预览 A 新增 自动真机调试 A 新增 多帐号调试默认测试帐号 A 新增 周期性更新调试支持 A 新增 云开发控制台代金券支付 A 新增 多线程 worker 支持单步调试 A 新增 公众号网页...
  • icon: 'success', // 图标类型,默认success 图标支持开发文档的icon duration: 1500 // 图标停留时间,默认1500ms }) 2、加载中 wx.showToast({ title: '加载中...',//提示的标题 icon: 'loading',//icon ...
  • 微信小程序 wx.showToast()用法

    千次阅读 2019-08-04 22:33:24
    wx.showToast接口只提供了两种icon【success和loading】展示形式,但是在实际开发中并不满足。这里可以通过加image:'图片路径' wx.showToast({ title:"成功", icon: 'loading...',//图标,支持"success"、...
  • ---------支持作者请转发本文-----------李宁老师已经在「极客起源」 微信公众号推出《微信小程序开发实战》系列文章,包括了小程序开发的所有核心技术,读者可以在公众号中输入...
  • 支持 3D Touch 设备上,Quick Actions 可以让用户更快,更少操作步骤去完成他们最常做事情,其中这么多操作可以通过主屏幕直接完成。比如用力地长按微信图标,会弹出诸如"扫一扫"和"我二维码"等常用功能,...
  • 前言Flutter 作为Google出品一个新兴跨平台移动客户端UI开发框架,正在被越来越多开发者和组织使用,包括阿里咸鱼、腾讯的微信等。示意图今天,我主要讲解Flutter中图片组件方面Widget,包括Image、Icon、...
  • 微信小程序聊天功能模块,现在已经支持发送图片,文字,音频,视频,表情,在线即时聊天啦。 需要做可以联系我微信。13977284413 上代码: <view class="bo"> <view class="cgzslj"> <image...
  • Taro小程序自定义顶部导航栏

    千次阅读 2020-12-14 12:56:35
    微信自带顶部导航栏是无法支持自定义icon和增加元素,在开发小程序时候自带根本满足不了需求,分享一个封装好组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。 我用是京东Taro多端编译...
  • 你不知道那些事</a></li><li><a href="https://github.com/RubyLouvre/newland/issues/6">github上值得关注前端项目</a></li><li><a href="http://island205.github.io/Single-Page-App-Break/index.html">单页...
  • 为了实现计算功能,被微信小程序坑死了,应为js文件中不支持window对象,没法使用eval函数 介绍文章:剖析简易计算器带你入门微信小程序开发 其他微信小程序:极简天气,读你电影 Previews Description 涉及微信...
  • wechatpy 2.0 一些想法

    2021-01-07 04:24:38
    微信概念变成对象,将接口变成对象方法,方法返回对象实例。对象实例提供各种数据格式转化能力。 <pre><code> python follower_manager = wechat_client.get_manager('fellower')...
  • 微信小程序商城 微信小程序商城,微信小程序...用开发工具修改域名 mall 为你自己域名 开发工具里面上传代码提交微信审核 审核通过后,小程序后台去发布新版本即可 用户无需重新扫码,关闭小程序重新打开就是新版本了
  • 确保微信开发工具上面登录 APPID 和你在后台配置 APPID 是同一个 能否帮我免费添加功能? 可以! 点击页面顶部 Star ,关注后,项目有最新动态 github 会提醒您,不错过重要更新; 点击页面顶部 Fork, ...
  • 本工程使用的Icon全部来源于icons8,对他们表示感谢。 Gif动态图来源于网络,对网友的制作表示感谢。 如果有什么地方侵犯了您的权益,请联系我们删除 案例参考 todo License Under the Creative Commons ...
  • 微信聊天时候,点击了一个好友,可以进入聊天界面,但是如果我点中了一个好友,突然又不想和他聊天了,我会多按一会,然后将手指划开,这样就可以撤销刚才触摸事件...
  • ★2014年推出当前最火开源项目“JeeWx(捷微:敏捷微信开发平台)”,并获得CSDN举办“2014年开发者大会”公开投票第一名 ★2014年8月份捷微jeewx2.0与百度达成战略合作,集成百度地图,增加地图功能,附近商家...
  • 如果你想在分享icon列表中内置一些元素,比如放一个收藏按钮在分享按钮后面: <div class="social-share"> <a href="javascript:;" class="social-share-icon icon-heart"></a> </div> ...
  • (MySQL支持的比较好,其他数据库有什么问题可以在issue中反馈) 要求 本工具由于使用了Java 8的众多特性,所以要求JDK 1.8.0.60以上版本,另外JDK 1.9暂时还不支持。 下载 你可以加入QQ群下载二进制安装版,目前...
  • 微信开发中引用zico 美化zico 赋予zio动作 一些优秀应用技巧 轮子 前辈们说,不要重复制造轮子。 问题是:如果从来没有轮子呢? 那个在半夜三分抠着脚用着外文工具抠脚大汉,很能成就一个复兴强国开发重任...
  • Markdown:在线编辑器GifCam:Gif录制工具 微信小程序开发文档Iconfont-阿里巴巴矢量图标库:各种需要小图标都有哦遇到几个问题1、首页导航栏左右滑动效果图: 这部分,是通过微信小程序scroll-view组件来...
  • git -- git emoji列表(github commit 前面icon) git--git tag相关命令和实践记录 less Class constructor FileManager cannot be invoked without 'new'.md hexo hexo系列问题之我们换了电脑怎么办.md ...

空空如也

1 2
收藏数 33
精华内容 13
关键字:

微信开发支持的icon