• 微信小程序----组件之icon 2017-09-04 08:42:53
    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 根据文档写代码 效果图: 项目结构: 核心代码: index.wxml index.wxss .group{ background: yellow;...height: 1
    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/

    根据文档写代码

    效果图:


    项目结构:


    核心代码:

    index.wxml

    <view class="group">
      <block wx:for="{{iconSize}}">
        <icon type="success" size="{{item}}"/>
      </block>
    </view>
    
    <view class="group">
      <block wx:for="{{iconType}}">
        <icon type="{{item}}" size="40"/>
      </block>
    </view>
    
    
    <view class="group">
      <block wx:for="{{iconColor}}">
        <icon type="success" size="40" color="{{item}}"/>
      </block>
    </view>
    index.wxss

    .group{
    background: yellow;
    height: 100px;
    }
    index.js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        iconSize: [20, 30, 40, 50, 60, 70],
        iconColor: [
          'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
        ],
        iconType: [
          'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
        ]
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
      }
    })

    源码下载:

    http://download.csdn.net/download/zhaihaohao1/9962142







    展开全文
  • 这几天想研究一下微信的小程序,就下载了一个微信开发工具,下载完成之后发现任务栏竟然没有对应的图标,我的强迫症又犯了,。在安装的时候我发现了好像这个工具是依赖于NW就是node-webkit开发的,碰巧以前作古一个...
  • Ubuntu 安装 微信开发者工具 因为官网没有提供linux的安装文件,所以我们搞一波: 本人喜欢安装到/opt/目录下 cd /opt/ git clone https://github.com/cytle/wechat_web_devtools.git sudo chown -R [用户名...
  • 微信小程序使用icon图标 2017-07-08 19:20:58
    一、先到阿里巴巴矢量图标库(http://iconfont.cn/),用微博帐号登录,搜索你想要的图标,然后添加入库 下载下来,找到ttf格式文件 二、到这个平台https://transfonter.org/,把刚才下载的...
  • 微信Web开发者工具只有window版本和mac版本,如果想要在...将在window系统下安装的微信web开发者工具文件夹中的package.nw、icon.ico、* 微信web开发者工具.exe拷贝到nwjs sdk解压后的文件夹内。 3、修改代码进入到...
  • 错误代码: "1not found 编译 .wxss文件信息错误",如 下图 出现场景: 1.一般出现在安装新版本之后出现的状况,可能由于版本之间的兼容导致 解决办法: 1.重装整个软件,卸载之后,删除注册表 ...
  • icon 标签一、icon 体验1.1 icon 的三个属性1.2 icon 的基本使用二、实际项目2.1 微信支付界面支付成功展示2.2 跳转等待界面2.3 搜索栏实现 一、icon 体验 先看一张图 上图展示的图标便是微信提供的,我们可以直接...
  • 微信小程序学习(三):在微信开发者工具中,使用WeUI 这里就是将WeUI导入到微信开发者工具中,我并没有使用多少样式,这里只是展示了一下怎么引用 网上有很多的方法,我绝大多数都没看懂,这里就是最简单的将文件...
  • Linux微信开发者工具安装 2017-09-25 09:08:27
    Linux微信开发者工具安装
  • 微信开发ajax封装 2019-06-16 12:18:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  •  对于前端开发而言,微信小程序因为其简单快速、开发成本低、用户流量巨大等特点,也就成了前端开发工程师必会的一个技能。   2.先看看小程序效果 (1)欢迎页     (2)首页:轮播头图,...
  • 今天整理一下微信开发中遇到的图片和附件的上传问题。 开发环境参考:微信开发(一)--分享接口 点击打开链接 由于是基于weixin-java-tools 封装的java sdk,所以在微信底层处理上我们可以直接调用WxMpService. ...
  • 下面以Linux版本的微信开发者工具举例: 1.这里下载移植的Linux版本微信开发者工具https://github.com/cytle/wechat_web_devtools 我放在了这个目录 2.进入/usr/share/applications/ 这里是添加桌面快捷方式...
  • 第一步 先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个 压缩包,解压压缩包里面有一个css的文件复制到项目中,更改后缀为wxss ...在wxm...
  • 一 、首先要安装 nw.js sdk 环境  nw.js的安装:  1.首先是osx下安装,你可以参考官方文档进行app下载然后设置路径,也可以直接一步到位,一条命令直接安装!  前提先安装好node.js环境,然后直接终端下输入命令...
  • (3)安装开发工具IDE (4)小程序项目搭建 (5)项目编译 (6)真机预览调试 开发前准备 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 小程序开发前准备...
  • 相信做过微信小程序的都知道,官方给出的微信web开发工具上根本就无法加载node_modules包,即使可以加载,node_modules动辄几十M的大小,小程序的代码限制在1M以内,微信小程序的三个不足: 1无法调用npm包 2无法...
  • 微信开发(1)自定义菜单自定义菜单属于高级API,订阅号没有(成为开发者也不行)。因此需要服务号或者企业号。 此外,也可以申请测试号。点击“开发者中心”中的“接口测试申请系统”。 然后用你的微信扫描一下...
  • 删除的设置在启动页面的底部“管理项目”中,如下图:进入管理项目后,就能够看到每个项目的最左边是删除icon:二、修改小程序项目的AppID当要迁移小程序,也就是把小程序从一个已有的小程序账户迁移到新的账户下,...
  • 微信小程序开发分析总结 2018-02-11 09:23:57
    本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法。毕竟借小程序写...
1 2 3 4 5 ... 20
收藏数 7,971
精华内容 3,188