借助API wx.getSystemInfoSync(); 通过API可获取的值: // 在 iPhone6 下运行: var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidth); // 输出 375(单位 px) // 在 iPhone6 Plus 下: var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidt…

.net mvc 站点自带简易SSL加密传输   因项目需要,传输数据需要加密,因此有了一些经验,现简易抽出来分享! 请求:前端cryptojs用rsa/aes 或 rsa/des加密,后端.net 解密返回后端.net用rsa/aes 或 rsa/des加密,前端cryptojs解密 图示: 数据发送加密: 返回数据加密: 开源代码分享:https://github.com/guandy/NetSSL 现只是简易抽出,如果后续需求量大可考虑做成组件 Word报告自动生成(例如 导出数据库结构)…

目录 1,前言 2,属性 3,使用 1,前言 和css3动画不同,小程序中动画是主要是通过js控制的,简单来说就是创建一个动画实例animation.调用实例的方法来定义动画效果.最后通过动画实例的export方法导出动画数据传递给组件的animation属性. 2,属性 首先需要通过wx.createAnimation,创建一个动画对象,该对象接收四个属性. 属性名 数据类型 默认值 必填 说明 duration number 400 否 动画持续时间,单位 ms timingFunction…

前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ…

前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能修改数据!下面介绍一下我制作小程序完成的几个小的功能,希望能够给开发小程序的朋友带来帮助! 滚动动画制作 小程序制作回到顶部,或者滚动到某个位置,很简单,也有很多实现方法! 例如: .动态改变它的 scroll-top .scroll-into-view 滚动到某个ID的位置 但是,问题来了,这个效…

简单总结一下微信动画的实现及执行步骤. 一.实现方式 官方文档是这样说的:①创建一个动画实例 animation.②调用实例的方法来描述动画.③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性. 因为小程序是数据驱动的,给这句话加上数字标注分为三步: 前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行. 当然如果有多个元素的animation="{{ani}}",也都会执行这个动画规则. 二…

如图,当小程序发布新的版本后,用户如果之前访问过该小程序,通过已打开的小程序进入(未手动删除),则会弹出这个提示,提醒用户更新新的版本.用户点击确定就可以自动重启更新,点击取消则关闭弹窗,不再更新. 官方给的示例代码: const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) }) upd…

今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以控制动画的循环播放,但是小程序里面没有.该怎么实现呢? 无非就是2种状态的切换. wxml: <button class='cut-btn' open-type='share' animation="{{animationData}}">喊好友砍一刀</button>…

在小程序开发中,我们通常会遇到这样的需求:提交某个表单成功后跳转该表单详情页面,但是返回时需要跳转回到首页(注意:我这里的首页是提交表单页的前一个页面),而不能再返回提交表单的页面,并且要在首页中刷新刚刚提交的数据 1. 这首先要求我们在提交成功跳转时,使用redirectTo的方式,不保留当前页面 2. 然后需要在当前页面上获取到首页并调用首页的刷新方法 如下图,prePage为首页,refresh()为首页中刷新数据的方法…

小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() 函数的同级加上 const that = this;   ,然后将this.setData换成that.setData就好了 贴上我的代码示例: getMsg: function () { const that = this; // 动画内容 this.animation.translate(-1…

这里介绍 2 种方法一种是常规的小程序方法操作,另一种是引入动画库 1. 常规动画操作设置 wxml: <view> <view bindtap="clickMe">点我有动画</view> <view animation="{{donghua}}" class='test'>点我有动画---测试</view> </view> js:(3步骤) data:{ donghua:"&quo…

<view class="biground" >     <block wx:for="{{Namelist}}" wx:key="">       <text class="user-motto" style='font-size: 80%;'>送餐报酬</text>       <text class="user-motto" style='font…

微信小程序使用模板消息需要使用表单提交 formId,因此进行了简单的代码测试,在 wxml 文件中创建 form 对象,并在 form 标签中声明属性 report-submit="true" . wxml 代码如下: <form name='sendMessageTest' report-submit='true' bindsubmit='getFormId'> <button form-type="submit">获取formId<…

方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊. 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放:2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生…

1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读者看一下该放在哪里而已,,,,不能注释!!! 3,在一些json文件中,如果是你没有写上的,就必须加上 {} 花括号. 4,在BarTab中的List属性,里面的index首页配置,一定要放置在第一项,第一项,重要.[图2] 这里的是官方文档: https://mp.weixin.qq.com/de…

需求描述 想做一个类似京东小程序首页功能列表左右滑动的效果,效果图如下 遇到的问题 1. 如何让scroll-view显示两行 做过小程序开发的都知道,scroll-view要么显示一行,可以左右滚动,如果显示两行的话就会适应屏幕宽度,达不到左右滚动的效果,所以我们需要改变一下我们的数据结构         [{           item: [{             "_id": "2",             "id": 7,    …

这两天整个技术圈都炸锅了,微信小程序(微信应用号)发布内测,首批200家收到邀请,但是没受邀请的同学,也不用担心,下面介绍一下解决方法. 首先需要下载ide,昨天只需要下载0.9版本的编辑器并替换文件就行了,但是可能微信那边修复了,导致不可用.现在我们要准备两个版本:0.7盒0.9的版本,我测试过了,可以使用,正常的界面如下图: 首先准备好两个安装文件,先安装0.7的版本.安装成功后,打开,微信扫描,确认登陆. 两个文件在QQ微信应用号群(390289365)里有共享. 然后安装0.9的版本,安…

做项目中需要对前端数据加密传输这个时候需要用到前端加密的算法主要是:Aes.js,Md5.js 一.Vue项目用到的aes.js加密. 1.直接在index.html引入aes.js或者在npm install 安装. 2.加密代码要放在Vue项目的assets目录这样build的时候可以压缩,在浏览器上不容易找到加密处理的方法. 3.使用的时候在调用接口的地方引入或者在main.js引入: 4.掉接口的时候使用 我项目aes_encrypted.js代码: function aes_encry…

要给用户发送消息提醒的话,需要申请订阅消息.订阅消息分一次性订阅与长期永久性订阅.一次性订阅没有实际意义,用户订阅一次就只能发送一次.这里主要是指导大家如何申请永久长期订阅功能.对于公众号而言,大家先登录公众号的管理平台,找到下面图片所示位置,点击进去 新增加下面两个分类即可,如果原来的分类满了,就删除一个再添加即可 这样就可以选择长期订阅模板功能了 选择模板后,就复制相应的模板ID 对于小程序而言,大家登录小程序管理平台后,点开下面的网址https://mp.weixin.qq.com/wxa…

wxml: <view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button> js: //js Page({ d…

wxml: <view class='buy' bindtap='showBuyModal'>立即购买</view> <!-- 点击立即购买 弹出购买遮罩层 --> <view class="cover_screen" bindtap="hideBuyModal" wx:if="{{showModalStatus}}"></view> <!-- 点击立即购买 弹窗 --> &…

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx; bottom:10px;position: absolute;"></view> Page({ data: { animationData: {} }, onShow: function () { var animation = wx.createAnimation({ d…

经过我手机多次测试,支持的最小px为: 8px;…

如果案例有问题,可到QQ群找到今日相关压缩文件下载测试. WXML: <view class="cebian"> <view animation="{{animation}}"> <view class="cebian01"> <text class="cebian011">电话</text> </view> <view class="ce…

WXML <view class="container"> <view class="page-body"> <view class="page-section"> <view class="animation-element-wrapper"> <view class="animation-element" animation="{{anim…

代码如下: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // 用户点击了确定 可以调用删除方法了 } else if (sm.cancel) { console.log('用户点击取消') } } }) 项目中使用: deleteById(e) { console.log(e); this.QueryParam.baseId = e.currentTarget…

下面进入正题,有关于将溢出的文本用省略号代替的方法,不知道什么原因,我的程序用传统的代码无法解决: .text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 在网上找了一些解决方法,比如设置一下width都不行,最后在一篇博客上找到了解决方法: .text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webk…

upload: function () { let that = this; let {uploadFlag} = that.data; if (that.data.uploadFlag) { return; } that.data.uploadFlag = true; //上传录制的音频 wx.uploadFile({ url: '', filePath: that.data.link, name: 'file', formData: { userInfo: that.data.userInf…

一. 报错的原因是因为,图片的文件太大了,已经超过了40kb...不能超过40kb. 在这里查看图片文件的大小:…

嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了.另一种方法就是border来写了,虽然怎么写都是尖角的,可是我想尝试一下.纯手写写出设计师想要的圆角吧 什么是圆角的?什么是尖角的?以下图片可以对比出来: 这种是尖角: 这种是圆角: 尖角的方法网上一搜也是一大堆,其中有我最喜欢的阮大神的方法,阮大神博文在此(可点击):http://www.ruan…