- 博客(28)
- 收藏
- 关注
原创 vue-cli2.0初始化项目
cmd命令:vue init webpack 项目名然后一路回车依次对应:项目名称 项目描述 项目作者 标准模式 路由 是否使用eslint 是否启用单元...
2019-06-21 15:28:13 861
原创 eslint配置
eslint用于规范代码注:脚手架已安装相关包,这里不再写怎么安装配置文件:eslintrc.js详细规则请参考官网:http://eslint.cn/
2019-06-20 14:33:07 176
原创 移动端rem适配,postcss
说明:通过使用postcss,在代码里直接使用px作为单位,运行时自动转rem使用步骤: 1--终端输入安装命令:npm install lib-flexible; npm install postcss-pxtorem 2--基本配置(.postcssrc.js): ...
2019-06-20 14:27:18 390
原创 微信小程序采坑九:scroll-view里scroll-into-view无效
无效配置:<scroll-view scroll-into-view="sss"> <view id="sss"></view></scroll-view>正确使用:需动态配置scroll-into-view="{{}}"
2018-12-21 17:44:33 1969
原创 微信小程序系列十六:公共方法的引用
公共js:utils.js导出方法:module.exports={公共方法名:定义的方法名}const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = da...
2018-11-23 16:29:31 782
原创 微信小程序采坑七:背景图不显示
问题描述: 背景图在手机不显示,开发工具可以原因: 背景图不支持本地图片解决办法:1.图片放到服务器,使用服务器地址2.转成base64引用,可使用在线转换工具直接转换复制 ...
2018-09-18 17:51:51 792
原创 微信小程序采坑六:页面跳转无效
问题描述: 页面跳转无效解决办法:1.确定页面已在app.json中配置2,tabbar页面跳转需要使用wx.switchTab
2018-09-18 17:48:22 694
原创 微信小程序采坑四:下拉刷新不回弹
问题描述: 下拉刷新在手机上不会自动回弹,开发工具可以解决办法: 主动调用wx.stopPullDownRefresh
2018-09-18 17:35:41 8667
原创 微信小程序采坑五:页面使用scroll-view时,下拉刷新无法下拉
问题描述: 页面使用scroll-view时,下拉刷新无法下拉;解决办法: scroll-view和下拉刷新不兼容
2018-09-18 17:33:37 5983
原创 微信小程序采坑三:输入框设置自动获取焦点后无法自动获取焦点
问题描述: <input type='text' focus='true' />无法获取焦点解决办法: <input type='text' focus='{true}' />注:focus='true'不加大括号时,会被解析成字符串...
2018-09-18 17:30:08 16935 3
原创 小程序采坑二:this.setData()报错
问题描述: Cannot read property 'setData' of null;at pages/timeline/timeline onLoad function;at api getSystemInfo success callback function;TypeError: Cannot read property 'setData' of null解决办法: ...
2018-09-18 17:26:13 1534
原创 微信小程序系列十五:购物车选择规格颜色选中效果
wxml:<view> <view>规格:</view> <view class='dis'> <block wx:for="{{guige}}"> <view class="{{gindex==index?'color':''}}" bindtap='guige' data-ind
2018-09-04 17:56:25 4284
原创 微信小程序系列十四:tab点击切换效果
原理: 根据current渲染class样式;wxml: <view class='tabbar'> <view class="{{current==1?'tab-item item-on':'tab-item'}}" bindtap='select' data-index='1'>tab1</view> <view cla...
2018-09-04 17:36:39 560
原创 微信小程序系列十三:自定义进度条
知识点: 图层定位,颜色渐变wxml:<view class='T_jindu'> <view class='jindu2'></view> <view class='jindu'></view></view>css:.jindu{ height: 10rpx; backg...
2018-09-03 15:03:51 4071
原创 微信小程序系列十二:修改checkbox,radio,button默认样式
checkbox改变大小及颜色:checkbox .wx-checkbox-input { width: 28rpx; height: 28rpx;}checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #3296fa;}checkbox .wx-checkbox-input.wx-ch...
2018-08-31 17:55:40 873
原创 小程序采坑一:倒计时在ios不识别,安卓可以
说明: 在小程序中ios识别的日期格式为:2018/06/30,因此有时后写倒计时等涉及时间的方法时,会出现安卓可以,ios不可以的问题解决方法: 日期格式全部设置为xxxx/xx/xx 格式具体方法: xx.replace(/-/g, "/") ...
2018-08-30 14:05:19 1403
原创 小程序系列十一:自定义对话框
自定义弹出框,效果类似showmodal;技术点:自定义组件dialog.wxml:<view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> ...
2018-08-29 16:48:32 1424
原创 微信小程序系列十:自定义底部导航
比较简单代码就不多贴。template:<template name="tabbar"> <view class="weui-tabbar"> <block wx:for="{{list}}" wx:key="index" wx:for-item="item"> <navigat
2018-08-29 16:30:16 2893
原创 微信小程序系列九:自定义导航栏
自定义头部导航app.json中设置:"navigationStyle": "custom";js代码:var vm=this;wx.getSystemInfo({ success: function (res) { let totalTopHeight = 68 if (res.model.indexOf('iPhone X') !==...
2018-08-29 16:20:02 315
原创 微信小程序系列八:使用view实现全选,单选
原理: 根据数据的checked属性值判断是否处于选中状态注意: 样式可以自己调整,这里不再添加wxml:<block wx:for="{{list}}" wx:key="*this.index"> <view data-index="{{index}}" data-name="{{item.id}}" class="{{item.check
2018-08-23 13:56:26 5173
原创 微信小程序系列七:删除列表数据
wxml:<view> <block wx:for="{{list}}" wx:key='id'> <view class='list'> <view class='left'>{{item.name}}</view> <view class='right' data-index='{{in..
2018-08-17 11:17:20 9844 2
原创 微信小程序系列六:星级评分
wxml代码:<block wx:for="{{start}}" wx:key="index"> <image src="{{fraction>=item?'/images/21_06.png':'/images/21_08.png'}}" class='start' data-current="{{item}}" bindtap='startIcon'&
2018-08-17 10:10:59 289
原创 微信小程序系列五:验证码倒计时
wxml代码:<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type...
2018-08-16 15:33:55 223
原创 微信小程序系列四:表单提交
<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type='number'...
2018-08-16 15:31:34 548
原创 微信小程序系列三:数据获取及数据渲染
1.数据获取:注意: 1.服务器地址要配置https 2.配置合法域名 3.本地调试记得在开发者工具勾选wx.request({ url: '接口地址', data: {}, success: function (res) {}, fail:function(err){}})2.数据渲染: js代码如下:...
2018-08-16 15:18:53 7190 2
原创 微信小程序系列二:获取用户openid
openid作为用户在小程序的唯一标识,获取方法如下:小程序端操作:app.jsApp({ onLaunch: function () { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId wx.re...
2018-08-16 14:58:16 229
原创 微信小程序系列一:获取头像昵称
wx.getUserInfo(OBJECT)该方法经过官方改版后已不支持主动调用,要获取头像昵称等用户信息,需要用户主动授权。现在获取用户头像昵称等信息的方法如下:1.通过button触发 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> 所需信息都在e.detail....
2018-08-16 14:47:03 6171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人