• 当前标签:小程序

小程序canvas文字自动换行,回车符自动换行

const ctx = wx.createCanvasContext('customCanvas') // 文字自动换行 function fillText(height, text, cb) { var chr = text.split(""); //这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; ctx.setFontSize(14) for (var a = 0; a < chr.length; a++) { if ((chr[a] == '\n') || (chr[a] == '↵') || (chr[a] == '\r') || (chr[a] == '\r\n')) { // 如果有回车符则换行 row.push(temp); temp = ""; } else if (ctx.measureText(temp).width < 295) { temp += chr[a]; } else { a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 // if (row.length > 2) { // var rowCut = row.slice(0, 2); // var rowPart = rowCut[1]; // var test = ""; // var empty = []; // for (var a = 0; a < rowPart.length; a++) { // if (ctx.measureText(test).width < 220) { // test += rowPart[a]; // } // else { // break; // } // } // empty.push(test); // var group = empty[0] + "..."//这里只显示两行,超出的用...表示 // rowCut.splice(1, 1, group); // row = rowCut; //

2019-03-28 19:36:09 17 0 0
阅读详情

小程序验证码倒计时

// 倒计时 function countTime(that, e) {     if (e == 0) {         that.setData({             isGetCode: true         })         return     }     e--     that.setData({         count: e     })     setTimeout(()=&gt;{         countTime(that, e)     },1000) } 使用: countTime(this, 60) &nbsp;

2018-08-16 17:44:37 12 0 0
阅读详情

微信小程序 自定义单选(radio)、复选按钮样式(checkbox)样式

radio /*  重写 radio 样式  */ /* 未选中的 背景样式 */ radio .wx-radio-input{    border-radius: 50%;/* 圆角 */    width: 40rpx;    height: 40rpx; } /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */    height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); } checkbox /*  重写 checkbox 样式  */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{    border-radius: 50%;/* 圆角 */    width: 40rpx; /* 背景的宽 */    height: 40rpx; /* 背景的高 */ } /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ checkbox .wx-checkbox-input.wx-checkbox-input-checked{    border: none;    background: red; } /* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{    border-radius: 50%;/* 圆角 */    width: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */    height: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */    line-height: 40rpx;    text-align: center;    font-size:30rpx; /* 对勾大小 30rpx */    color:#fff; /* 对勾颜色 白色 */    background: transparent;    transform:translate(-50%, -50%) scale(1);    -webkit-transform:translate(-50%, -50%) scale(1); }

2018-08-03 10:34:49 51 0 0
阅读详情

小程序多图上传并返回操作

之前有写过小程序上传图片的,大多数都是前端处理,这篇是关于上传到服务器接收返回数据操作的,这里使用迭代器防止数据返回异步。 小程序上传图片及预览图片 小程序选择、预览、删除、上传图片 js: /**   * 上传图片   */  upImg: function (e) {      let that = this      wx.chooseImage({          success: function (res) {              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片              let tempFilePaths = res.tempFilePaths              // console.log(tempFilePaths)              let imgs = that.data.imgs  // 这个是储存图片地址,用于显示图片              let image = that.data.image  // 这个是获取图片名称或者id等后端发送请求需要的数据              that.uploadImage(0, tempFilePaths)          }      })  },  /**   * 图片上传接口   */  uploadImage: function (i,filePath){      if (i == filePath.length){          return      }      let that = this      let imgs = that.data.imgs      let image = that.data.image      wx.uploadFile({          url: app.globalData.api + '/Uploads/uploader', //仅为示例,非真实的接口地址          filePath: filePath[i],          name: 'file',          success: function (res) {              let img = JSON.parse(res.data)              console.log(img)              if (img.code == 200) {                  imgs.push(img.data.url_file_name)                  image.push(img.data.file_name)                  that.setData({                      imgs,                      image                  })                  console.log(that.data.imgs)                  console.log(that.data.image)                  i++                  that.uploadImage(i, filePath)              }              //do something          }      })  }, &nbsp;

2018-07-06 10:59:18 29 4 0
阅读详情

小程序自定义弹窗 获取授权失败重新获取授权

小程序很多获取的权限都从 button 组件中获取,这就经常需要弹窗提示操作了。而小程序自带的模态框又没法设置button获取信息,只能自定义一个模态框了 下面以获取微信地址为例: 在app.wxss中添加样式(很多地方需要用模态框,直接写在全局样式表中更方便) /* 提示框 */ .box{     position: fixed;     top: 30%;     width: calc(100vw - 40rpx);     background: #fff;     z-index: 100;     margin: 0 20rpx;     border-radius: 10rpx;     overflow: hidden; } .box-tit{     height: 100rpx;     line-height: 100rpx;     padding: 0 20rpx;     text-align: center;     border-bottom: 1px solid #eee; } .box-content{     padding: 40rpx 20rpx;     font-size: 30rpx;     color: #666; } .box-btn{     display: flex;     align-items: center; } .box-btn button{     flex-grow: 1;     margin: 0;     color: #333;     border-radius: 0; } .box-btn button:first-child{     border-right: 1px solid #eee; } .box-btn button::after{     border: none; } .box-bg{     position: fixed;     top: 0;     left: 0;     width: 100vw;     height: 100vh;     background: rgba(0, 0, 0, 0.3);     z-index: 1; } 然后在wxml中添加: &lt;view wx:if="{{boxShow}}" class='box-bg' bindtap='closeBox'&gt;&lt;/view&gt; &lt;view wx:if="{{boxShow}}" class='box'&gt;     &lt;view class='box-tit'&gt;提示&lt;/view&gt;     &lt;view class='box-content'&gt;上门地址需要授权才能获取,是否去获取授权?&lt;/view&gt;     &lt;view class='box-btn'&gt;         &lt;button bindtap='closeBox'&gt;取消&lt;/button&gt;         &lt;button open-type='openSetting' bindopensetting="boxConfirm"&gt;去授权&lt;/button&gt;     &lt;/view&gt; &lt;/view&gt; 最后看js: Page({   /**    * 页面的初始数据    */   data: {       boxShow: false,   },   /**    * 获取地址 点击获取地址按钮的事件    */   getAddress:function(e){       let that = this      // 首先获取授权状态     wx.getSetting({         success: function(res) {             console.log(res)             if (res.authSetting['scope.address']) {                  // 如果授权 继续获取                 that.chooseAddress()             }else{                 // 如果没有授权 第一次弹出授权                 wx.authorize({                     scope: 'scope.address',                     success(res) {                         that.chooseAddress()                     },                     fail(err) {                         // 取消授权后 弹出模态框重新授权                         that.setData({                             boxShow: true                         })                     }                 })             }         },         fail: function(res) {},         complete: function(res) {},     })   },   /**    * chooseAddress  得到微信地址    */   chooseAddress:function(){       wx.chooseAddress({           success: res =&gt; {               console.log(res.userName)               console.log(res.postalCode)               console.log(res.provinceName)               console.log(res.cityName)               console.log(res.countyName)               console.log(res.detailInfo)               console.log(res.nationalCode)               console.log(res.telNumber)           },       })

2018-07-03 19:04:21 34 0 0
阅读详情

微信小程序所有组件初始化样式box-sizing

小程序所有组件初始化样式 box-sizing: border-box view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{     box-sizing: border-box; } github:https://github.com/hlbj105/xcx_box-sizing

2018-07-03 09:51:05 59 0 0
阅读详情

微信小程序添加本地外部字体文件

在小程序中是不能直接引入字体文件的,需要把文件转为base64再引入; 首页下载好你需要的字体文件在本地; 然后访问 https://transfonter.org/ 网站把字体文件转为base64; 1、先点击 Add Fonts 上传字体文件; 2、再点击 base64 encode 按钮选上; 3、点击 Convert 生成base64代码; 4、点击Download 下载; 5、解压,打开其中 stylesheet.css ; 6、复制里面的代码放入小程序wxss中,建议单独新建一个wxss,在需要的地方引入就行。

2018-05-23 11:03:16 24 0 0
阅读详情

小程序选择、预览、删除、上传图片

上次写了篇上传图片的文章:小程序上传图片及预览图片 ,还缺少一点功能,今天做了另一种删除删除样式,加上上传图片到服务器功能; wxml &lt;!-- 图片上传模块 --&gt; &lt;view class='upImage' wx:if="{{isImage}}"&gt;   &lt;view class='upImage-list'&gt;     &lt;view class='image-li' bindtap='chooseImage'&gt;       &lt;view class='iconfont icon-xiangji'&gt;&lt;/view&gt;     &lt;/view&gt;     &lt;view class='image-li' wx:for="{{imgs}}" wx:key="imgs"&gt;       &lt;image bindtap='previewImage' data-index='{{index}}' mode='aspectFill' src='{{item}}'&gt;&lt;/image&gt;       &lt;text bindtap='delImage' data-index='{{index}}'&gt;删除&lt;/text&gt;     &lt;/view&gt;   &lt;/view&gt;   &lt;button bindtap='uploadImage'&gt;上传图片&lt;/button&gt; &lt;/view&gt; wxss /* 上传图片 */ .upImage {   padding: 10px;   margin-top: 10px; } .upImage-list {   display: flex;   flex-wrap: wrap; } .image-li {   margin-right: 10px;   margin-bottom: 10px;   width: calc((100vw - 50px) / 4);   height: calc((100vw - 50px) / 4);   border: 1px solid #fff;   border-radius: 10px;   overflow: hidden;   position: relative; } .image-li:first-child {   display: flex;   align-items: center;   justify-content: center;   color: #eee; } .image-li:first-child view {   font-size: 100rpx; } .image-li:nth-child(4n) {   margin-right: 0; } .image-li image {   width: 100%;   height: 100%; } .image-li text {   position: absolute;   text-align: center;   bottombottom: 0;   left: 0;   width: 100%;   font-size: 24rpx;   background: rgba(0, 0, 0, 0.5);   color: #fff; } .upImage button{   background: rgba(0, 0, 0, 0);   color: #fff;   border: 1px solid #fff; } JS data:{     imgs: [] , // 图片临时储存 }, /**    * 选择图片点击    */   chooseImage:function(){     let that = this;     wx.chooseImage({       // count: 1, // 默认9       sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有       sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有       success: function (res) {         // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片         var tempFilePaths = res.tempFilePaths         let imgs = that.data.imgs;         for(let i =0; i &lt; tempFilePaths.length; i++){           imgs.push(tempFilePaths[i])         }         that.setData({           imgs: imgs         })       }     })   },   /**    * 预览图片    */   previewImage:function(e){     let _index = e.currentTarget.dataset.index;     let list = this.data.imgs;     let current = list[_index];     wx.previewImage({       current: current, // 当前显示图片的http链接       urls: list // 需要预览的图片http链接列表     })   },   /**    * 删除图片    */   delImage:function(e){     let _index = e.currentTarget.dataset.index;     let previewImage = this.data.imgs;     console.log(previewImage)     previewImage.splice(_index, 1);     this.setData({       imgs: previewImage     })   },   /**    * 上传图片    */   uploadImage:function(e){     let imgs = this.data.imgs;     for (let i = 0; i &lt; imgs.length; i++){     wx.uploadFile({       url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址       filePath: imgs[i],       name: 'file',       formData: {         'user': 'test'       },       success: function (res) {         var data = res.data         //do something       }     })     }   },

2018-03-16 11:10:06 49 6 0
阅读详情
  • 1
  • 2
  • 3
前往