- 博客(123)
- 资源 (1)
- 收藏
- 关注
原创 小程序canvas
在wxml 文件中放置一个 canvas组件 并设置 canvas-id属性调用wx.createCanvasCantext方法创建画布上下文 该方法的参数值就是 canvas组件 canvas-id属性值调用画布上下文对象中的相应的方法绘制图形
2021-07-03 17:32:34
281
原创 小程序动画
小程序允许使用wx.createAnimation方法创建Animation对象 并通过animation属性与某个组件绑定来展示动画效果 小程序支持常用的动画效果 例如旋转 移动 缩放 倾斜如果是并行动画(例如 旋转 缩放动画同时执行)不断调用Animation对象的动画方法即可 如果是串行动画 每次调用动画的方法后 都需要调用step()方法后 然后在调用其他的动画方法<view> <image animation="{{animation}}" src="http
2021-07-03 14:21:37
261
转载 小程序骚操作
使用 app.json创建页面按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应page的形式,创建完成后,app.json中会自动注册该页面。实际上,我们还可以通过直接在app.json中注册页面来生成对应的page。"pages": [ "pages/index/index", "pages/newpage/newpage" ],善用编译模式组件复用小程序样式这一点经常被遗忘,因为新建component的时候,小程序并不会展示该配置项。配
2021-06-28 13:35:49
602
原创 小程序网络请求
wx.request 发起的HTTPS网络请求 默认超时时间和最大时间都是60s 超时时间可以在app.json中设置一个小程序同时只能有5个网络请求连接wx:request({ url:'test/jj.php', data:{ x:"", y:"", }, header:{ content-type:'appliccation/json' //默认值 }, success(res){ console.log(res.data) } })服务器最终.
2021-06-25 16:11:21
281
原创 小程序 map 地图组件
要设置 宽度 高度<map id="myMap" markers="{{markers}}" style="width:100%;height:300px;" longitude="116.313972" latitude="39.980014" scale='16'></map>
2021-06-25 15:51:18
101
原创 小程序拨打电话APi
phone(){ console.log('ddd'); wx.makePhoneCall({ phoneNumber:'13409904743' }) },
2021-06-25 15:19:28
475
原创 vue修饰符
lazy 修饰符默认情况下 v-model 默认是在input事件中同步输入框的数据的数据发生 data里的数据就会发生改变lazy 修饰符可以让失去焦点或者回车才会更新number修饰符默认情况下 在输入框中无论我们输入是字母还是数字 都会被当做字符串进行处理但是如果我们希望处理的是数字类型 那么最好直接将内容当做数字处理number 修饰符可以让在输入的内容自动转成数字类型trim 修饰符如果输入的内容首尾有空格 通常我们希望将其去除trim修饰符可以去除左右两边空格
2021-06-25 14:34:51
117
原创 css3 属性合集
boder-radius 圆角语法:* boder-radius: value 四个角* boder-radius: value value 左上右下 右上左下* boder-radius: value value value value (左上角 右上角 右下角 左下角)顺时针详解:boder-radius: value value value value / value value value value水平方向 / 垂直方向从指定角的顶端 向内部引出垂直半径 和水平半径
2021-06-25 14:32:22
201
原创 grid布局
容器属性 grid-template-colunms: // 定义每一列的宽 // 取值 100px 200px 300px // 25% 25% 25% 25% grid-template-rows: // 定义每一行的高 // 100px 200px 300px当元素设置为grid布局后 项目(子元素)flaot ,display:inline-block,display:table-cell,certical-align,column-*...
2021-06-25 14:31:21
237
原创 小程序上传图片
官网说明tempFilePaths 可以作为img 标签的src 属性显示图片<image src="{{imgUrl}}"></image><button bindtap="chosseImage">选择图片</button>chosseImage() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], source
2021-06-25 14:27:42
79
原创 小程序获取地址
原生wx.chooseAress() 方法调起用户编辑收货地址元神界面 并在编辑完成后返回应用的某个页面 wx.chooseAress({ success(res){ } })第二种 提交订单时 用户创建地址传给后台 后端返回
2021-06-24 20:43:28
174
原创 小程序的路由 和 参数的传递
wx.switchTab只能跳转tabBar页面 并关闭其他非tabBar页面 异步wx.navigateTo和wx.redirectTowx.navigateTo用于跳转到页面内的某个页面 且保留当前页面 跳转页面后面 可以返回上一个页面(wx.navigateback) 可以返回到源页面wx.redirectTo:关闭当前页面 不能返回到上一个页面 只能跳转非标签页wx.reLaunch关闭所有页面 打开到应用内的某个页面 既能跳转到标签页 又能跳转到非标签页
2021-06-24 20:34:35
354
1
原创 小程序登录详解
小程序登录的三个角色小程序用户使用客户端 由于小程序运行在微信之上 因此小程序可以通过API获取微信用户的身份信息开发服务器 小程序的后端服务器 用于用户提供服务微信接口服务 为开发者提供接口服务小程序获取 code在小程序中通过 wx.login() 获取登录凭证 code code由小程序内部自动生成 每次调用 wx.login() 获取的code 都不同 需要注意的是 code的有效期为为五分钟 且被微信接口验证一次就失效发送code小程序将code 发送给开发者服.
2021-06-24 19:41:27
5689
原创 小程序 模块 模板 缓存
模板新建post 文件夹 下 创建 post-item.wxss 和 post-item-wxmltemplate 模板相关内容必须包裹 template 标签内 使用 name 属性指定 template 模板名 这个模板名将在引用时使用template 模板 is 是指定要使用那个模板template 模板 data属性 可以向template 传入数据 wx:for="" =>传递 data ="{{item}}" <template name="postItemId
2021-06-23 16:31:47
113
原创 小程序 Tab栏切换组件
核心 主要用到了 swiper组件属性类型说明currentNumber当前滑块的 index 默认为0current-item-idString当前滑块的 item-id 不能同时指定 currentbindchangeEventHandlecurrent 改变时会触发 change 事件效果wxl<view class="wrapper"> <view class="head"> &l.
2021-06-10 23:04:40
251
原创 小程序数据量过大问题
setdata 官方描述setData 理解setData 函数用于将数据从逻辑层发送到视图层(异步)this.data 的值(同步)直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。仅支持设置可 JSON 化的数据。单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题。数据量过大 如何更新业务场景:
2021-06-03 12:26:16
1572
原创 小程序 scroll-view
最近项目 用到 局部滚动 遇到一些问题<scroll-view scroll-y scroll-top="{{scrollTop}}" // 上拉加载bindscrolltolower="onReachBottom" style="height:calc(100vh - 104rpx )"// 下拉加载bindrefresherrefresh="onPullDownRefresh" // 开启 上拉 下拉refresher-enabled refresher-tri.
2021-05-31 20:04:30
51
原创 图片保存到相册
保存文件前要调用wx.downloadFile,产生临时路径成功之后wx.saveImageToPhotosAlbum的路径要按照文档要求格式传入视频下载:// sources = ['htttp/www.vivo.com/345.jpg','htttp/www.vivo.com/325.jpg'] 网络图片 sources.forEach((item, index) => { wx.downloadFile({ // 下载零时文件 .
2021-05-26 14:21:22
169
原创 伪类 first-child、last-child 、last-of-type、first-of-type 、nth-child()
last-of-type写CSS,发现有时用结构伪类first-child、last-child会失效。div p:last-of-type,只会从p元素中找,会忽略其他类型元素<p>第一段</p><p>第二段</p><div class="firstbox"> <p>第一段</p> <p>第二段</p></div><div class="thirdbox"&g
2021-04-15 16:18:37
199
原创 vant-weapp 组件 样式的覆盖(二)
最近项目中用到了 vant 组件 但是需要对组件进行样式定制 才能满足我的需求以 tab 标签为例 我需要对 背景颜色 和tab 标题进行修改修改完成 效果主要是用了官方提供的外部样式类 <view class="tab-page"> <van-tabs nav-class="sdk" tab-class='tab' active="{{ active }}" bind:change="onChange"> <.
2021-04-11 16:25:57
1181
原创 小程序文件上传和预览
图片上传// 选择图片 wx.chooseImage({ success(res) { const urls = res.tempFilePaths for (var i = 0; i < urls.length; i++) { // 上传图片 wx.uploadFile({ url:
2021-04-10 13:27:26
185
原创 vant-weapp 组件 样式的覆盖(一)
最近在小程序开发中使用到 vant-weapp 组件 但有些样式不符合自己的项目要求 需要对样式进行覆盖以DropdownMenu组件为例 需求是用户选择菜单项 菜单文字变成 橙色样式的修改 就是以权重高的 覆盖权重低的<view style="{{container }}"><van-dropdown-menu style="{{ buttonStyle }}" > <van-dropdown-item value="{{ value1 }}" bin
2021-04-05 12:56:05
1281
原创 小程序 使用vant-weapp 组件
一、电脑需要下载 node.js二、下载npm通过npm 安装npm init -ynpm i @vant/weapp -S --production修改 app.json将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。修改 project.config.json构建 npm 包打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可.
2021-04-03 18:29:10
137
原创 小程序腾讯地图(一)
项目需求定位当前位置手动选择当前定位 (逆地址解析)地图用的腾讯地图腾讯地图腾旭地图官网创建Key 值小程序地图sdk文档// 引入SDK核心类,js文件根据自己业务,位置可自行放置var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');var qqmapsdk;Page({ onLoad: function () { // 实例化API核心类 qqmapsdk = new Q
2021-03-27 20:29:05
487
原创 vue 全选功能
通过计算属性实现<template> <div> <div><input type="checkbox" v-model="checkAll" >全选</div> <div> <template v-for="(item,index) in mySelect"> <input type="checkbox" :k..
2021-03-24 18:32:44
182
原创 小程序使用 scroll-view 组件 坑
wxml<view class="czCard"> <scroll-view class="cardList" scroll-x> <view class="itembox" wx:for="{{8}}" > <view class="box"> {{index}} </view> </view> </scroll-view></view>..
2021-03-23 21:16:30
268
原创 小程序的屏幕适配:自定义导航样式
使用了自定义导航条样式,即在app.json中增加配置:"window": { "navigationStyle": "custom"},经过上面配置,就没有导航条了,整个界面直接是天气预报页面的背景图,现在遇见了小程序的屏幕适配问题,笔者界面设计是定位地址文案部分跟小程序的胶囊操作区域对齐,但是如果只是简单的使用 rpx,在 iPhone 6 的视觉稿这个值是计算之后的 px 值,所以单位是 px!这个值在 iPhone 6 手机中是32px(iPhone 6 屏幕宽度为3.
2021-03-23 16:11:47
286
原创 小程序的图片自适应问题
项目当中会遇到这种需求 是很常见的 在H5 中 直接 宽度固定 高度自适应 图片不会有拉扯或者压缩的现象 但是在小程序中 不能这么设置看看官方文档 发现 widthFix符合我的需求 可以解决注意: 图片外面的盒子高度需要固定 因为小程序image是封装组件直接给 image组件设置就行 <image style="height:50rpx; width:100rpx" mode="widthFix" src="https://res.wx.qq.com/wxdoc..
2021-03-23 13:13:37
477
原创 小程序 获取openid
code2Session 获取用户唯一 openid登录凭证校验 通过wx.login() 接口 获的临时凭证 code 后传到开发者服务器调用此接口完成登录流程wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: '自己的服务器请求接口', data: { code: res.code } })
2021-03-22 22:24:32
250
原创 小程序引入字体图标
下载字体图标创建一个子体文件 把字体图标改成 wxss 不然小程序 会找不到这个文件在app.wxss 引入注意点:iconfont.css 改成 wxcss引入是 @import
2021-03-21 20:08:08
169
原创 Es6 继承
super 关键字 与构造函数super 关键字用于访问对象父类上的函数 可以调用父类的构造函数 也可以调用父类的普通函数类的继承子类可以调用 父类的constructor 当父类 函数 有 this 时 子类调用 需要用 super 核心是改变this 指向 class Test { constructor(x,y){ this.x = x; this.y = y;
2021-03-14 21:18:32
60
原创 Object.create()
**Object.create()**方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。Object.create(proto,[propertiesObject])proto:新创建对象的原型对象。(proto)propertiesObject:新创建对象的私有属性返回值一个新对象,带着指定的原型对象和属性。注意:如果propertiesObject参数是 null 或非原始包装对象new 和 Object.create() 区别都是创建一个对象new
2021-03-10 21:38:48
60
转载 offset client scroll系列
关于js中的offsetWidth、clientWidth、scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义。注意: 下面元素属性和元素方法都通过 elem.属性 或 elem.方法 的方式使用,window属性通过 window.属性 的方式使用,document属性则通过document调用。offsetTop:元素到offsetParent顶部的距离offsetParent:距离元素最近的一个具有定位的祖宗元素(relative,absol
2021-02-08 20:01:13
280
原创 git 高级
查看当前版本文件前后修改了那些内容查看当前版本下所有文件git log // 输出版本号git show 版本号查看特定文件git log -p 文件路径查看版本路线图 git log --oneline --graph git log --all //对应所有分支 commit信息 git log --all --graph // 以图表显示 git log --all -n4 // 所有分支取最近的四个 git log -n4 // 当前分支取最近的四个给文件
2021-02-06 19:47:00
90
转载 git 分支
分支的概念在介绍两种方法之前,我们需要先了解一下分支的概念:分支是用来标记特定代码的提交,每一个分支通过SHA1sum值来标识,所以对分支的操作是轻量级的,你改变的仅仅是SHA1sum值。如下图所示,当前有2个分支,A,C,E属于master分支,而A,B,D,F属于dev分支。A----C----E(master) \ B---D---F(dev)它们的head指针分别指向E和F,对上述做如下操作:git checkout master //选择or切换到master分支git m
2021-02-06 10:24:46
112
原创 git 满屏 退出
1、git log 退出如果commit(提交)比较多,git log 的内容就会比较多;当满屏放不下,就会显示冒号,回车(往下滚一行)、空格(往下滚一页)可以继续查看剩余内容;退出:英文状态下 按 q 可以退出git log 状态。2、git commit当该命令没有带-m参数时,会跳出commit change log (COMMIT_EDITMSG)界面(如下所示),这个是vi编辑器(也有可能是vim编辑器),和linux的使用时一样的,因为涉及到是否要保存编辑内容,所以退出命令有多种。2.
2021-02-06 09:36:11
815
原创 npm (二)
npm 包的发布必须是npm 的源 我们常用的是淘宝镜像查看当前源 nrm ls更改当前源 npm config set registry https://registry.npmjs.org/npm login 登录npm publish 上传下次再上传 要改版本pack.json "name": "cj-ui-com", "version": "0.1.1", "private": false, // 必须为false "main":
2021-01-29 20:27:21
108
原创 npm 和 yarn 和 cnpm
基于npm 进行模块管理https://www.npmjs.com/ 基于npm是从npmjs.com平台下载安装npm install xxx //把模块安装在当前项目中(node__modules)npm install xxx -g //把模块安装在全局环境中npm install xxx versions > xxx.version.json //查看某个模块的版本信息 (输出到指定的JSON文件中)npm init -y //初始化当前项目npm i xxx --save
2021-01-29 20:20:00
183
转载 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
在配置webpack自动打包时,运行npm run dev,发现报错:Error: Cannot find module'webpack-cli/bin/config-yargs’解决了半天,一顿头大解决了半天,一顿头大在这里插入图片描述版本不兼容,这是我最后得到的结果,哎哎哎!!!package.json文件查看版本在这里插入图片描述不要紧,我已经解决了错误,哈哈哈哈哈哈!!!方法:卸载,卸载,卸载npm uninstall webpack-cli -D npm uninstal.
2021-01-22 16:42:25
99
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅