我的博客

一 概述上一节介绍了通过CSS属性keyframes设置图片选择动画，本文介绍以下两种形式的动画：this.animate 接口(旧的)wx.createAnimation接口(新的，2.9.0开始支持)二 this.animate2.1 布局文件<view class="container"> <view class="box"> <!--this.animate--> <image id="loading" src="/im

一 功能预览加载中加载完成加载中，3s后完成二 CSS动画-加载中3.1 要选中的图形3.2 CSS-keyframes 旋转动画布局文件<view class="container"> <view class="box" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIterati

一 仿微信视频录制效果二 业务说明视频录制前，只显示取消和视频录制按钮录制开始后，只显示视频录制按钮，并且上方显示时间、录制按钮显示录制进度录制完成后，显示重拍、取消、上传按钮录制完成后，点击按钮，可预览录制视频点击重拍，录制视频消失，显示相机预览画面点击取消，返回上一个界面点击上传，将视频上传三 可能遇到的问题(显示录制倒计时和录制进度)3.1 布局文件(canvas绘制) <!--底部布局-中间部分-canvas绘制--> <view>

一 拍照效果拍照前拍照后二 业务流程拍照前，显示取消和拍照按钮拍照后，显示预览画面及重拍、取消、拍照和上传按钮点击重拍，预览界面被拍照界面替换点击上传，上传拍照预览的图片点击取消，返回上一个界面三 可能遇到的问题(中间拍照按钮绘制)3.1 思路一(Canvas) //1-内层实体圆-白色-默认状态显示 var circleInnerCtx = wx.createCanvasContext('circleInnerLayer') /

一 概述百分比布局整体缩放调整字体大小二 百分比布局.item-wrapper{ width: 33.33%;}二 整体缩放html { position: fixed; height: 100%; width: 100%; /**调整缩放 */ transform: scale(0.75, 0.75); -ms-transform: scale(0.75, 0.75); -webkit-transfo

一 现象当父控件的属性同时为：position: relative;z-index: -1;时，子控件无法点击；position:relative;z-index:-1其他无法点击可点击二 示例(不可点击)2.1 布局文件(zindex.wxml)<view class="page-container1"> <text bindtap="tapclick">点击</text> <button type="prim

一 小程序动态授权与否对比未动态授权动态授权二 小程序中使用的授权scope对应接口描述scope.userInfowx.getUserInfo用户信息scope.userLocationwx.getLocation, wx.chooseLocation地理位置scope.userLocationBackgroundwx.startLocationUpdateBackground后台定位scope.addresswx.

一 状态对比Normal状态Warn状态二 示例2.1 布局文件(button.wxml)<button type="{{isactive?'primary':'warn'}}" bindtap="buttonClick">{{isactive?'确认':'取消'}}</button>2.2 逻辑文件Page({ data: { isactive: true }, buttonClick() { this.setD

一 概述小程序中弹窗的两种方式：modal弹窗WeUI组件dialog二 弹窗原理在布局中事先放置好要显示的Dialog布局通过一个参数dialogShow控制Dialog的显示与隐藏点击按钮时，通过 this.setData({ dialogShow: false,})改变Dialog的值并改变Dialog的状态三 modal弹窗3.1 布局文件(modal.wxml)<view class="container-view"> <view>主题内容

一 概述录制前录制中录制结束二 计时功能2.1 定时器介绍2.1.1 设置定时器(setInterval)number setInterval(function callback, number delay, any rest)设置定时器后，返回一个number，根据这个number，传递给clearInterval来取消该定时2.1.2 取消定时器(clearInterval)clearInterval(number intervalID)取消由 se

一 概述网络请求地址放到url.js中，分别制定开发环境，体验环境，线上环境网络请求的方法放到request.js中，暴露get、post、upload方法请求前显示加载中，请求结束后隐藏加载中请求的接口方法，放到api.js中，并调用request.js中对应的方法二 请求方法封装2.1 请求地址(url.js)module.exports = { //开发环境 develop: { BASE_URL: "http://localhost:3000/", //本地

一 现象小程序中，布局文件中添加button，并在样式文件中设置button的宽度为100%，宽度无效：二 现象及原因2.1 页面2.1.1 布局文件：<button type="primary" >按钮</button>2.1.2 样式文件：button {width: 100%;}2.2 布局文件中button样式2.2.1 检查样式文件调试器——>Wxml——>button——>Styles——>检查按钮样式文件2.2.2

一 概述时间格式化：formatTime，接收参数：Date，返回格式化日期(yyyy/MM/DD HH:MM:SS)时间间隔：twoTimeInterval，接收参数，formatTime，返回days天hours时minutes分seconds秒二 时间工具类2.1 工具类/** * @description：时间格式化 * @param {*} date：日期 */const formatTime = date => { const year = date.getF

一 概述一个页面中，使用模板创建两个按钮，分别点击两个按钮时，查看日志无法区分点击的是哪一个二 按钮模板2.1 模板布局文件(template-button.wxml)<template name="dlhTemplate"> <view class="dlh" bindtap="buttonTap"> <button >{{buttonContent}}</button></view></template>

一 预览和真机调试效果预览效果编译、真机效果二 编译、预览和真机调试环境：都是develop2.1 检测调试环境代码(app.js) debugger const accountInfo = wx.getAccountInfoSync(); //查看环境 this.globalData.envVersion = accountInfo.miniProgram.envVersion console.log("编译环境：" + this.globalData.envVe

一 概述require：js代码中引用其他js模块代码include：wxml文件中引用template模板文件import：既可以在js代码中导入模块代码，又可以在wxml或wxss文件中导入模块文件二 import和require2.1 说明import和require：在js代码文件中导入逻辑代码模块require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法2.2 使用import使用示例import App f

一 概述小程序添加git版本管理，每次添加编译路径，都会生成project.private.config.json文件，与项目没有直接关系，不用提交二 查看忽略列表是否配置依次点击：版本管理——>设置——>忽略列表，查看是否配置了忽略文件三 添加.gitignore文件3.1 向项目中添加.gitignore文件，并添加忽略文件project.private.config.json3.2 删除远程仓库中的忽略文件删除 project.private.config.json

一 概述通过手机号登录后，获取用户token，并将token保存到Storage中token的有效期是一天，token失效后，自动跳转到登录接口，并获取最新tokentoken没有失效时，从小程序搜索进入，不需要登录了二 实现原理过程登录成功时，根据登录成功的时间，计算过期时间，并将过期日期保存到Storage中每次进入时，从Storage中获取保存的过期时间和当前时间进行比较当前时间小于Storage中保存的过期时间，不需要登录当前时间大于Storage中保存的过期时间，跳转登录页

一 概述微信小程序对WebView支持的库有：wxParse：微信小程序富文本解析自定义组件，支持HTML及markdown解析(已过期，不提供支持)web-view：微信官方提供，承载网页的容器(个人类型的小程序暂不支持使用)二 web-view的基本使用2.1 基本属性属性类型说明srcstringwebview 指向网页的链接bindmessageeventhandler网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、

一 概述将录像的结果传递给服务器，服务端提供的接口文档为：字段名称字段类型字段说明必填项示例tokenStringtoken是服务器下发的token(header)fileFile文件是文件名称命名规则：*.mp4userNoString用户编号是1111111organIdString机构编号是111111111二 录像文件说明2.1 录像文件{ duration: 2, errMsg: "operateCam

一 概述微信小程序中，与相机相关的组件是媒体组件camera调用系统相机拍照调用系统相机录像调用系统相机扫码二 camera相关属性属性类型默认值说明modestringnormal应用模式，只在初始化时有效，不能动态变更resolutionstringmedium分辨率，不支持动态修改device-positionstringback摄像头朝向flashstringauto闪光灯，值为auto, on, offfra

一 概述表格样式一表格样式二二 绘制过程外层设置display:table，并设置border-collapse表格边框模型表头设置display:table-row，单元格设置为display:table-cell每一行单元格同表头设置三 示例代码3.1 table.wxml(布局文件)<view class="su-table-box"> <view class="su-table"> <!-- 表格标题 --&g

一 效果对比不设置margin-left设置margin-left二 原因分析'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' +'border-right-width' + 'margin-right' = width of containing block左外边距+左边框宽度+左内边距+容器宽度+右内边距+右边框宽度+右外边距=容器宽度不设置默认为0，

一 概述微信小程序默认创建的应用，点击用户头像，会显示log日志，日志存储在Storage中，key值是logs，value值是Array数组，数组的长度为8二 logs日志分析2.1 读取logs日志并追加(app.js)onLaunch() { // 展示本地存储能力 const logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', l

一 概述WXS(WeiXin Script)：是小程序的一套脚本语言，结合WXML，可以构建出页面的结构WXS与JavaScript是不同的语言，有自己的语法，并不和JavaScript一致变量运算符数据类型语句基础类库模块二 变量2.1 概念声明变量用var变量只声明，不赋值，会被定义为undefine没有声明直接赋值使用，会被定义为全局变量2.2 变量的命名规则首字符必须是：字母（a-zA-Z），下划线（_）剩余字符可以是：字母（a-zA-Z），下划线（_），

一 概述本文要实现如下所示的效果：输入要显示的评价等级，界面上就有几颗星亮起，最多5颗二 思路界面布局中：五张图片横向排列，使用wx:if和wx:else判断显示哪一个在逻辑文件中，将要显示的评价个数，转换为数组(1-显示亮色，0-显示灰色)布局文件中，根据转换后的数组，显示评价结果三 代码3.1 模板文件(template-star)template-star.wxml<template name="starsTemplate"> <view class='

一 概述WePY (发音: /'wepi/) 是小程序上最早的一款类 Vue 语法的开发框架WePY参考了Vue.js，对原生小程序的开发模式进行了再次封装，贴近MVVM架构WePY支持组件开发，单位件模式，还支持外部加载的npm包二 WePY的特征开发风格：接近于Vue.js，支持组件Props传值，自定义事件、组件分布式复用等组件化：组件化开发，完美解决组件隔离，组件嵌套，组件通信等问题NPM：完美兼容所有平台依赖的npm资源包Promise：通过polyfill，让小程序完美支

一 概述使用kbone手动配置开发，需要基于webpack构建实现，事先准备好webpack.mp.config.js小程序官方提供了模板，基于模板可以快速构建项目开发官方提供的模板有：Vue模板、React模板、kbone-ui模板、Preact模板、Omi模板二 官方提供的模板及项目地址编号模板及地址1Vue 项目模板2React 项目模板3kbone-ui 项目模板4Preact项目模板5Omi项目模板三 小程序运行效果图

一 概述kbone 是一个致力于微信小程序和 Web 端同构的解决方案kbone实现了一个适配器，在适配器里模拟出了浏览器环境，让Web端的代码可以不做什么改动便运行在小程序里kbone可开发React、Vue、kbone-ui、Omi、Preact技术栈的小程序或Web二 kbone的优势大部分流行的前端框架都能够在 kbone 上运行，比如 Vue、React、Preact 等。支持更为完整的前端框架特性，因为 kbone 不会对框架底层进行删改（比如 Vue 中的 v-html 指

一 概述mpvue：Vue.js in mini program，即mini vue.js编程框架mpvue是把vue.js核心代码经过二次开发的框架，增加了vue.js开发小程序的能力mpvue适合习惯用Vue.js框架的开发者开发小程序使用二 mpvue开发的特点彻底的组件化开发能力，提高代码复用性完整的Vue.js开发体验方便的Vuex数据管理方案，方便构建复杂应用快捷的webpack构建机制：自定义构建策略，开发阶段热加载支持使用npm外部依赖使用Vue.js命令行工具

一 概述本文利用WeUI，仿制一款电影应用，下面是效果图对比别人应用仿制应用二 应用分析2.1 官方UI组件-WeUi-wxss编号内容说明1组件使用2扩展能力使用3接口未使用4云开发未使用2.2 应用与WeUI-wxss的对应关系编号内容组件1table菜单扩展能力/扩展组件/Tabs2正在热映/电影列表扩展能力/基础组件/Panel3内容搜索/搜索框扩展能

一 概述除了WeUI组件库，官方进行了扩展，包含组件库、扩展能力、接口和云开发示例项目地址在线预览码预览界面miniprogram-demo二 如何使用小程序示例2.1 小程序示例——tabs官方示例下的tabs位置miniprogram-demo-master\miniprogram\page\weui\example\tabs2.2 自己的项目如何使用tabsnpm库搜索miniprogram-component-plus/tabsnpm初始化，并

一 现象将微信小程序组件/API/云开发示例导入到小程序开发者工具后，出现如下错误信息，并且工具栏中，没有云开发按钮VM90 WAService.js:2 cloud init error: Error: errCode: -601034 | errMsg: 没有权限，请先开通云开发 at new g (VM90 WAService.js:2) at Function.success (VM90 WAService.js:2) at C (VM90 WAService.js:

一 概述wx:for可以用在view上，也可以用在block上在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名如果列表中项目的位置会动态改变或者有新的项目添加到列表中，需要使用 wx:key 来指定列表中项目的唯一的标识符二 wx:for渲染列表2.

一 概念这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一支持扩展库导入，不占用小程序体积二 WeUI介绍2.1 WeUI下载Github-Tencent/weui-wxss2.2 项目导入小程序解压后，用微信开发者工具打开dist目录2.3 WeUI组件介绍编号大分类组件1表单button、input、form、list、Slidev

一 概述插件是对js接口(export一些js接口方法)，自定义组件或页面的封装，用于嵌入到小程序中使用插件的开发和上传发布和小程序一样，插件一旦发布，第三方使用时无法查看插件的代码插件开发完成，未发布前，可以使用miniprogram目录中编写小程序代码来测试插件二 插件目录结构介绍2.1 创建插件项目2.2 默认插件项目插件项目预览插件项目目录介绍plugin目录：插件代码目录miniprogram目录：防止一个小程序，用于调试插件doc目录：用于放置插件开发文档

一 概述开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用Component构造器可用于定义组件，调用构造器时可以指定组件的属性、数据、方法等自定义组件可以拥有自己的wxml结构和wxss样式二 自定义组件2.1 创建自定义组件新建自定义组件文件夹components，然后在此文件夹中创建自定义组件my_component2.1.1 my_component.js配置文件{ "component":true, "usingComponents": {}

一 概述WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用定义模板时：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段导入模板：使用import导入模板使用模板时：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入二 模板使用示例2.1 定义模板在index文件夹下创建my_template.wxml<template name="msgItem"> <view&g

一 概述可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块模块只有通过 module.exports 或者 exports 才能对外暴露接口在需要使用这些模块的文件中，使用 require 将公共代码引入二 模块化2.1 定义模块创建utils文件夹，并在utils文件夹下创建common.js文件模块定义方式一function sayHello(name) { console.log(`Hello ${name} !`)}function sayGoodbye

一 概述服务器端使用Node.js搭建，接收到消息后，返回一条消息“自动回复”小程序端模拟聊天对话，右侧是用户端(发送消息后)，左侧是Socket回复消息小程序底部，输入框输入内容，点击发送按钮发送给服务器二 示例逻辑介绍在onLoad方法中，小程序连接Node服务器当输入框中输入内容，并点击发送按钮，此时的role为用户端，显示在右侧当输入框中内容为空时，提示消息不能为空哦~服务器端接收到用户发来的消息，返回自动回复，此时的role为服务端，显示在左侧发送完成后，页面滚动到底部