废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zhubo-avater'> <image class='zhuboIcon' src='../../image/video-list/avater.jpg'></image> </view> <view class='zhuboDes'> <view

前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件 可移动的视图容器,在页面中可以拖拽滑动会有好多个属性,在这里不一一介绍,只说我们能用

wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox 基本原理: 当进度小于180度,rightBox以左中点为原点进行旋转 当进度大于180度,rightBox位置不变 背景变成灰色,leftBox以右中点为原点进行旋转,旋转度数=进度-180   问题:rpx在转换成px时有误差 导致小圆不在中心位置 border-radius计算不准确 解决办法

微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Animation.rotateZ(-45).step() this.setData({ animation:Animation.export() }) } index.wxml <view> <view class="box" animation="{{animat

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所有围绕微信的创造比如公众号都应该发挥其应有的价值. (3)用完即走的高效服务→这一点就厉害了word天,微信要打造一个以微信为中心的生态链,不以绑定用户为目标.比如生活中有一些不太常用的app,我们可能一年也使用不了几次,但是有时候就需要用到,微信就想要提供这样一个平台,让你可以在微信中使用这中所谓

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5

以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task. 截图如下: 解决办法:需要在每个XXX.js文件中加入page(),以用来生成一个页面实例对象. Page({ }); 有时就算你在每个js文件中都写了基本的page()代码,还是会保这个错误

2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模块在"发现"频道最下方的位置.如果没有,请先将微信升级到最新版本,然后在通讯录搜索'小程序示例',点击之后返回"发现频道"即可.Tip:小程序搜索目前不支持模糊查询 小程序会带来什么 无处不在,随时访问 移动互联网的下一站是"唾手可得" --张小龙

这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢...) 首先在index.wxml中创建相关控件 <!--创建一个背景为蓝色的View,并且添加点击事件,输出启动日志-->  <view  bindtap="bindViewTap" class="myView">    <text clas

vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 微信小程序也支持rem尺寸单位,rem和rpx的换算关系:rem: 规

2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模块在“发现”频道最下方的位置.如果没有,请先将微信升级到最新版本,然后在通讯录搜索‘小程序示例’,点击之后返回“发现频道”即可.Tip:小程序搜索目前不支持模糊查询 小程序会带来什么 无处不在,随时访问 移动互联网的下一站是“唾手可得”——张小龙 切入正题:怎么开发? 1. 获取微信小程序的 App

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.   微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx

本文通过具体的实例记录微信小程序的入门知识. 1.特点 不需要安装 依赖微信应用 更接近原生APP 丰富的框架及API可达到快速开发的目的 2.工具使用 在开发的过程中可以使用微信开发者工具,更加直观的进行调式及看到界面:下载地址 3.目录结构 pages:小程序页面,包括js(页面逻辑),wxml(页面结构),wxss(页面样式)和json(页面配置) app.js:小程序公共逻辑 app.json:小程序公共配置 app.wxss:小城市公共样式 4.公共配置 window:设置默认页面的窗

在微信小程序当中,我们看到有: .js后缀文件,.json后缀文件,.wxss后缀文件,.wxml后缀文件 .js后缀文件就是我们写的普通的js文件 .json后缀文件就是小程序的配置文件,比如:windows的样式,页面的渲染文件顺序,Tabs导航的配置 当然,初始化的实例当中没有给出Tabs配置,其实就跟window的格式一样 .wxss后缀文件就是我们写的css文件 .wxml后缀文件就相当于我们的html文件,里面的view标签就看做是div , text标签就看做是p 所有的页面都在p

微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 设备               rpx换算成px(屏幕宽度/750)     px换算成rpx(750/屏幕宽度) iPhone5        1rpx = 0.42px                            1px = 2.34rpx iPhone6        1rpx = 0.5px                              1p

1.微信小程序 尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px =

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px 设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)iPhone5      1rpx = 0.42px     1px = 2.34pxiPhone6      1rpx = 0.5px 1px = 2rpxiPhon

rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.   微信小程序尺寸单位 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx

1.全局导入vant时build后有问题(只能页面引入) 2.微信小程序只能用:https开头,在微信公众号里还要修改下配置 3.微信小程序里textarea与vant的van-popup有问题,手机上没弹出键盘 4.cover-view不支持iconfont等图标 5.在微信小程序使用vant的复选框有问题,比如在购物车里,如果只剩有一个复选框组(父选框),复选框组里面有2个复选框(子选框),一个子选框选中,另一个未选中,从别的页面再进来,父选框还是选中状态.所以最好用icon图标代替. 6.

微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/font-family:"宋体";   /*设置字体为宋体*/ font-style:italic;    /*文字排版--斜体*/text-