- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue-cli2.0初始化项目
cmd命令：vue init webpack 项目名然后一路回车依次对应：项目名称 项目描述 项目作者 标准模式 路由 是否使用eslint 是否启用单元...
2019-06-21 15:28:13
867
原创 eslint配置
eslint用于规范代码注：脚手架已安装相关包，这里不再写怎么安装配置文件：eslintrc.js详细规则请参考官网：http://eslint.cn/
2019-06-20 14:33:07
187
原创 移动端rem适配，postcss
说明：通过使用postcss，在代码里直接使用px作为单位，运行时自动转rem使用步骤： 1--终端输入安装命令：npm install lib-flexible; npm install postcss-pxtorem 2--基本配置(.postcssrc.js): ...
2019-06-20 14:27:18
396
原创 微信小程序采坑九：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
2001
原创 微信小程序系列十六：公共方法的引用
公共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
789
原创 微信小程序采坑七：背景图不显示
问题描述： 背景图在手机不显示，开发工具可以原因： 背景图不支持本地图片解决办法：1.图片放到服务器,使用服务器地址2.转成base64引用，可使用在线转换工具直接转换复制 ...
2018-09-18 17:51:51
795
原创 微信小程序采坑六：页面跳转无效
问题描述： 页面跳转无效解决办法：1.确定页面已在app.json中配置2,tabbar页面跳转需要使用wx.switchTab
2018-09-18 17:48:22
706
原创 微信小程序采坑四：下拉刷新不回弹
问题描述： 下拉刷新在手机上不会自动回弹，开发工具可以解决办法： 主动调用wx.stopPullDownRefresh
2018-09-18 17:35:41
8687
原创 微信小程序采坑五：页面使用scroll-view时，下拉刷新无法下拉
问题描述： 页面使用scroll-view时，下拉刷新无法下拉；解决办法： scroll-view和下拉刷新不兼容
2018-09-18 17:33:37
6007
原创 微信小程序采坑三：输入框设置自动获取焦点后无法自动获取焦点
问题描述： <input type='text' focus='true' />无法获取焦点解决办法： <input type='text' focus='{true}' />注：focus='true'不加大括号时，会被解析成字符串...
2018-09-18 17:30:08
16956
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
1538
原创 微信小程序系列十五：购物车选择规格颜色选中效果
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
4296
原创 微信小程序系列十四：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
567
原创 微信小程序系列十三：自定义进度条
知识点： 图层定位，颜色渐变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
4090
原创 微信小程序系列十二：修改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
879
原创 小程序采坑一：倒计时在ios不识别，安卓可以
说明： 在小程序中ios识别的日期格式为：2018/06/30,因此有时后写倒计时等涉及时间的方法时，会出现安卓可以，ios不可以的问题解决方法： 日期格式全部设置为xxxx/xx/xx 格式具体方法： xx.replace(/-/g, "/") ...
2018-08-30 14:05:19
1408
原创 小程序系列十一：自定义对话框
自定义弹出框，效果类似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
1427
原创 微信小程序系列十：自定义底部导航
比较简单代码就不多贴。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
2930
原创 微信小程序系列九：自定义导航栏
自定义头部导航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
318
原创 微信小程序系列八：使用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
5201
原创 微信小程序系列七：删除列表数据
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
9889
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
297
原创 微信小程序系列五：验证码倒计时
wxml代码：<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type...
2018-08-16 15:33:55
225
原创 微信小程序系列四：表单提交
<view class='container'> <form bindsubmit='denglu'> <view class='list'> <view class='left'> <label>手机号:</label> <input type='number'...
2018-08-16 15:31:34
593
原创 微信小程序系列三：数据获取及数据渲染
1.数据获取：注意： 1.服务器地址要配置https 2.配置合法域名 3.本地调试记得在开发者工具勾选wx.request({ url: '接口地址', data: {}, success: function (res) {}, fail:function(err){}})2.数据渲染： js代码如下：...
2018-08-16 15:18:53
7199
2
原创 微信小程序系列二：获取用户openid
openid作为用户在小程序的唯一标识，获取方法如下：小程序端操作：app.jsApp({ onLaunch: function () { // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId wx.re...
2018-08-16 14:58:16
233
原创 微信小程序系列一：获取头像昵称
wx.getUserInfo(OBJECT)该方法经过官方改版后已不支持主动调用，要获取头像昵称等用户信息，需要用户主动授权。现在获取用户头像昵称等信息的方法如下：1.通过button触发 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button> 所需信息都在e.detail....
2018-08-16 14:47:03
6196
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人