今天我们来个庖丁解牛.对于一个完整的组合组件,看看通过工具是如何轻松完成的.首先看看九宫格完整的样子. 结构树是这样的.在结构树中,我们可以看到WViewColumn下面有九个WViewRow.WViewColumn之上的我们可以不用管,这些是画布上的内容,为了辅助设计用的.9个WViewRow是九宫格中的实际元素item. 每个item中图片和文字上下排列,九个item换行排列.那么这些是怎么做到的呢,当然是FlexBox的作用.下面详细介绍FlexBox属性对布局的影响.首先来介绍item的

工欲善其事必先利其器.下面为大家介绍一款工具软件,如何做到轻松布局. 工具简介:小程序layout设计工具,可视化方式进行小程序UI设计.通过鼠标拖拽组件方式进行UI布局.工具提供符合微信视觉统一的模板,并且按照FlexBox方式可视化布局.自动生成wxml和wxss,复制到微信开发者工具中即可同步显示.视频介绍请移步优酷http://v.youku.com/v_show/id_XMTgyNTQ4NDcyMA==.html 我们平时开发工作中都会有这种情况发生,为了能够完成一个布局,css改了之

使用微信小程序开发已经很长时间了,对小程序开发已经相当熟练了:但是作为一名对技术有追求的前端开发,仅仅熟练掌握小程序的开发感觉还是不够的,我们应该更进一步的去理解其背后实现的原理以及对应的考量,这可能会解释我们在开发过程中遇到的一些疑惑,比如为啥小程序不能操作dom.小程序是web技术渲染还是native技术渲染等等,另一方面对于我们个人成长也是有帮组的. 首先声明下,文章查看小程序开发者工具源码的方法仅限学习使用. 本文将从以下几个方面来说一下小程序的实现原理 如何查看小程序开发者工具源码 小

小程序中一般很少大段落的文字,基本是4.5个字的主题.一行标题.一行摘要.两行描述.显示时超出部分用省略号代替.下面结合工具使用介绍一下文字排版的方法.先看效果图.  工具中属性设置如下图:两行文字属性,限制行数=2,表示最多两行,超出部分用省略号代替. 不限制行数属性中限制行数=0,表示在小程序中根据文字内容自动拉伸. 一行文字属性中限制行数=1,表示文字只显示一行,超出部分省略号代替. 以上文字是显示在view中的,自动生成的wxml如下: <view class="WViewColu

下图是微信官方的要求 按照小程序UI设计(3)-符合视觉规范-列表视觉规范同样的方式,我们可以设计一样符合规范的输入项目.规范中没有说明padding-left的大小,我们暂定是15px.这样最外层view的padding-left和padding-right都是15px.以  为例制作符合规范的布局.首先在工具的画布上拖拽WViewRow. 然后设置width=375,padding-left和padding-right为15.再鼠标拖拽过来两个wviewrow,一个宽度是85,一个宽度是37

上一篇我们介绍了字体规范,此贴介绍一下在列表中如何组合使用.下图是微信官方的要求   在工具中通过拖拽组件可以制作出一样的效果拖拽一个WViewRow.这个组件是小程序的view,flex-direction=row.缺省的属性如下. 放在工具的画布上是这样的 下面我们以  为例实际制作一个.此单项列表中一个view包括两个view,横向排列.最外层的view有margin-top.padding-left和padding-right.我们先定义最外层view.为了看的清楚我先把画布改成蓝色(修

小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&运营每次投放新入口时,都需要找FE要页面链接.投放多少链接就要找FE多少次,一方面相互之间的沟通等待会耗掉不少时间,另一方面询问/回复过程会打断对方手头的工作,影响状态. 关键是大多时候这些链接只是需要改个渠道参数,并不涉及结构上的调整,完全可以由PM/运营自行修改. 然而要向所有PM&运营全面

Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除“微信web开发者工具” 2.删除一下几个配置和缓存文件: 1.-/Library/Application Support/微信web开发者工具 2.~/Library/Preferences/com.tencent.wechat.devtools.plist 3.~/Library/Caches/微信web开发者工具 3.重新安装“微信web开发者工具”

vscode 安装 vscode-wechat vscode-wechat 小程序开发提示工具 ---- 有了小程序开发提示,开发很方便 https://segmentfault.com/a/1190000007132719 https://marketplace.visualstudio.com/items?itemName=qinjia.vscode-wechat

工具中为小程序员们准备了符合微信开发规范的模板.之前帖子中介绍的规范都在模板中已经设计好了,可以直接复制粘贴使用.下图中的样式是从模板直接复制过来的.实际使用时只要更换为自己的图片和文字即可.自动生成的wxml和wxss也可以直接使用.从而大大提高了开发效率.  下面是部分模板的展示:   

下图是微信小程序官方要求字体规范 根据此要求小程序设计工具定制了符合规范的组件.如下图 工具使用时,将左侧组件拖拽到设计区域即可.字体大小和颜色都是按照规范设置的.在使用时根据微信要求在不同位置摆放即可.以下截图是text组件使用范例

随着微信红利的进一步释放,使用人群的不断增加,小程序从2017年01月第一批开发者出现后,2018年小程序得到快速的提升,小程序开发的相关应用小工具得到了市场的青咪,社会化大分工.协同.共享.协作的思想深入到各行各业,产业互联网行业细分领域属性越来越明显.随着互联网工具,软件信息化产业的发展,资本的催化,传统的农副产品生鲜配送行业的企业服务软件也受到了资本的喜爱.具体表现为 深圳某公司的生鲜配送系统也得到资本的催化,全国各地宣讲,神一般地宣传.使传统的生鲜配送企业的老板的思想突然之间,感觉他们也

准备 开发工具下载 获取APPID 安装工具 安装 接受协议 选择安装位置 等待安装完成 安装完成 选择项目 选择小程序 填写信息 确定 无误后,点击确定进入开发页面 建立普通快速启动模板界面

问题模块 框架类型 问题类型 操作系统 工具版本 开发者工具 小程序 Bug Windows v.02.1810290 异常描述: 无法输入中文,偶现,但是概率有点高,重启,重装,更新版本等等都未解决问题. 处理方法: 找到了另一个提出同样问题的帖子,官方回复说是bug: 经验证, ctrl(command) + shfit + w 重启下项目,是可行的,看来也只有如此了. 期待下个版本解决这个问题.

为什么使用“素材管理”: 微信小程序环境中本地资源图片是无法通过 WXSS 获取的,可以使用网络图片,或者 base64,或者使用<image/>标签.. 当然,如果不想这么麻烦,你可能会直接选择使用小程序开发工具的“素材管理”功能了. 的确,开发者工具上的“素材管理”,点进去就能很方便的上传图片,然后获取图片地址放到代码中用,使用简单,管理方便. 但是,这个功能并不是完全免费的. 收费的“素材管理”:  很多人刚开始接触的时候看着能直接用就用了,不久之后手机就会收到欠费通知了. 小程序开发文

在设计工具中,根据规范我们定义了大中小三种按钮的尺寸大:720rpx *94rpx 圆角10px 字体18中:360rpx*70rpx 圆角8px 字体16 文字距离两边最小60小:120rpx*60rpx 圆角6px 字体13 文字距离两边最小30这些按钮都放在工具的模板中,如下图: 微信中固定按钮type有三种,primary=绿色,default=灰色,warn=红色.size分为default和mini.镂空效果是plain参数.使用时鼠标点击一下,然后再鼠标点击画布,然后ctrl+v粘

工具截图 此工具通过可视化操作进行布局,依据iphone6尺寸设置画布,可以自动生成rpx和百分比的wxss.后续还会增加js代码自动生成.工具中组件按照微信小程序开发规范进行了缺省设置,margin.padding.fontsize.fontfamily.color等属性按照微信视觉一致规范定制而成.软件左侧是常用组件,中间是画布,右侧是wxss属性设置面板.wviewrow组件是小程序view的延伸,自动设置主轴:row.wviewcolumn组件是小程序view的延伸,自动设置主轴:col

项目介绍 Taro_Mall是一款多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro框架编写,现已全部完成小程序和h5移动端,后续会对APP,淘宝,头条,百度小程序进行适配.Taro_Mally已经完成了 litemall 前端的所有功能 扫码体验 由于小程序没有认证,只发布了一个预览版,只能加15个人,如有需要,请点击小程序申请 小程序 h5移动端 项目架构 项目用Taro做跨端开发框架,Taro基本采用React的写法,项目集成了 redux dva 控制单

1:右侧详情界面 合法域名 都要在需要在小程序平台 配置合法域名 这样你的小程序请求的网址 才能通. 1.2如果自己的域名没有配置https 可以勾选为 不校验合法域名即可 (小程序官方规定 网址必须是Https).

数据库设计心得 根据我们小组数据库设计的整个流程,我们将整个数据库设计划分为两个具体的阶段,在每个阶段需要进行不同的准备,有不同的注意事项,接下来我们将结合在数据库设计过程中遇到的一些问题和困难,提出自己的一些观点,希望能对大家有所启发.如有异议,欢迎指正. 一.准备阶段: 在数据库设计前,需要准备以下几样东西: 1:设计工具 数据库设计过程中会用到一些软件,例如powerdesigner(实际上不仅仅是用于数据库设计).想要设计好数据库,熟练运用软件是必不可少的.至于如何学习使用其进行数据库设

FlexBox布局中的变幻方式很多,我们继续了解一个左-上下结构的布局分解  左边结构树中WViewRow下面有两个WViewColumn.WViewRow是横向排列,WViewColumn是纵向排列.第一个WViewColumn中放一个图片,第二个放两张图片.如下图展开的结构树. 下面针对第二个WViewColumn中有两个图片的FlexBox进行分解讲解. flex-direction=column说明内部组件主轴x是从上而下.flex-wrap在本工具中对于column类型的不起作用.此处