微信小程序踩坑日志

起步

申请账号
查看AppID—“设置”-开发设置小程序的appid相当于小程序平台的一个身份验证
安装开发者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818以及查阅开发者工具介绍https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201818
编写Hello World，需要新建一个空的文件夹用来存放你的小程序，这里就需要刚刚申请到的AppID，
点击预览，可生成二维码，可在手机端查阅

新建一个项目后可能会报.wxss文件解析错误，解决方法是：

在控制台输入openVendor(),清除里面的wcsc.exe，然后重启一下工具

代码构成

通过微信开发者工具创建的应用，有以下几种文件.wxml .wxss .json .js

初识小程序

实现即开即用，用完即走，免去下载安装的繁琐的流程。基于微信庞大的用户群体，植入成本低，易于被接受

风格类似于Vue，有Vue经验的开发者上手比较容易

并且不支持主流框架，如vue react angular jquery等，小程序有一套试图容器Dom

不支持Dom操作

不能使用window.document对象，所以无法操作Dom，操作节点可以使用wx.createSelectorQuery()

rpx布局

可根据屏幕宽度进行自适应

路由层级

wx.navigateTo（object）

保留当前页面，跳转到应用内某个页面，wx.navigateBack可返回

wx.redirtTo（object）

关闭当前页面，跳转到应用内某个页面

wx.reLaunch（object）

关闭所有页面，打开应用某个页面

小程序最多只能打开5个页面，当打开页面的个数达到5个以后，wx.navigateTo不能正常打开新的页面，请避免层级过多的交互方式，或使用wx.redirectTo重定向

tabBar底部导航栏

tabBar是一个数组。配置最少2个最多5个

页面滚动到顶部

基础库1.4.0支持

wx.pageScrollTo({scrollTop:0   //滚动到页面的目标位置（单位px）})

图片资源，css中背景图片

css中无法使用本地资源的图片作为background-image，可使用网络资源或base64，或使用image。tabBar的icon资源可使用本地资源

textarea在滚动页面中的BUG

textarea，map等组件是客户端创建的原生组件，他的层级是最高的。如果遇到定位元素的话，永远在最上面，盖不住。

请勿在scroll-view swiper picker-view movable-view使用textarea
css动画对textarea无效

window配置

navigationBarTextStyle导航栏标题颜色仅支持black/white状态栏，导航条，标题，窗口背景色仅支持纯色，不支持渐变色

设置网络请求的超时时间

"networkTimeout": {"request": 10000 // 10秒
}

Image标签图片

image默认width：300px，height：225px，lazy-load懒加载只对page与scroll-view下的image有效

小程序可以监听小程序的关闭后，但是无法阻断

场景：想在小程序退出时弹出个提示框，并阻止关闭（暂时无法实现）

小程序第一次提交审核的时间比较后面的长

第一次审核时间一般1-2天

微信号，QQ号，手机号的正则验证

某些活动需要填真实姓名，联系方式等信息，为了防护用户随意填写的信息，需要对信息进行校验

var wxReg=new RegExp("^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$") //微信号正则验证var qqReg=new RegExp("[1-9][0-9]{4,}")  //QQ号正则验证var phReg=new /^1[345678]\d{9}$/  //手机号正则验证var nameReg=new RegExp（"^[\u4e00-\u9fa5]{2,4}$"）  //2-4位中文姓名正则验证

在微信小程序中添加了tabBar之后wx.navigateTo和wx.redirtTo不能进行跳转操作

原因：如果待跳转页面从属于TabBar，wx.navigateTo将失效，如要切换，需使用wx.switchTab：使用该方法之后将不再有返回按钮

设置背景色

在app.wxss中使用

page{background-color="#fff";}

这里需要注意的是，page前面没有点。

设置换行和空格

\t 空格 \xa0 空格
\n 换行

必须在<text>标签中！

微信小程序引入外部wxss

@import "test.wxss"

text标签属于行内标签

微信小程序引入iconfont

微信小程序引入外部文件的方式是@import “a.wxss”

当需要引入iconfont的时候，第一时间想到h5的引入方式

@font-face {font-family:"iconfont";src:url('iconfont.eot?t=1485242349767'); /* IE9*/src:url('iconfont.eot?t=1485242349767#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff?t=1485242349767') format('woff'), /* chrome, firefox */url('iconfont.ttf?t=1485242349767') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg?t=1485242349767#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

使用这种方式，字体会引不进来

解决方案如下

1.进入iconfont选择自己需要的icon，并且下载到本地

找到后缀名为.ttf的文件

2.打开https://transfonter.org/，将字体文件转化成base64的格式

3.转化无完成后将生成的stylesheet.css拷贝到微信小程序项目中

通过@import方式引入

在需要引入的地方

#icons:before{font-family:"iconfont";/* color: red; */font-size:40rpx;content:"\e60b"}

输入框

输入框的使用频率还是比较高的，样式的话可以包裹一个view自定义，参数与平时使用的input类似

下拉加载

下拉加载的两种方式

1.全局设置

打开app.json，添加这样一句话"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "老焦家","navigationBarTextStyle":"black","enablePullDownRefresh": "true"  //添加这句话},

使用这种方法，是将微信小程序中所有的页面都添加下拉加载功能

2.单个页面设置

找到你需要添加下拉加载功能的wxml页面，找到其对应的.json文件
{"enablePullDownRefresh": "true" //添加这句话
}

使用这种方法，只给单独页面添加下拉加载功能

必须结束，否则会一直在加载状态

直接贴代码；（加载page（{}）里面）

onPullDownRefresh:function(){setTimeout(function(){wx.stopPullDownRefresh();console.log(1);},1000)},

关于微信小程序下拉刷新组件加载图片（三个小点）不显示的问题

在使用微信小程序的下拉样式时遇到这样的问题

不是因为这几个点不存在，而是他一直存在只不过和背景色类似，导致看不出来罢了

解决方案

在对应的.json中,添加

"backgroundTextStyle": "dark"

轮播图（swiper）

微信小程序开发的循环用到了

<block wx:for="{{数组名}}" wx:for-index="index">

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
	Number	0	当前页面所在的index
	Number	5000	自动切换时间间隔
duration	Number	1000	滑动动画时长

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">    <swiper-item>    <image src="a.png"  mode="aspectFill"/>    </swiper-item>  </swiper>

image中的mode属性
image组件默认宽度300px 高度225px
mode有13种模式，其中4中缩放模式，9种是裁剪模式
aspectFill 保持纵横比缩放图片，只保证图片短边完全显示出来
widthFix 宽度不变，高度自动化，保持原图宽高比不变、
scaleTo 不保持纵横比缩放图片，是图片填满imagemode="aspectFill"

在使用swiper的时候，需要用swiper-item包起来，否则会出现图片显示不出来，但是也不报错的情况

初次使用swiper的的时候可能遇到当图片自动轮播到最后的时候，跳转到第一页的效果不友好，此时需要添加circular=“true” 无缝衔接

调用照相机

在camera.wxml中；

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 900rpx;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<image class='photoes' src="{{src}}"></image>

在camera.wxss中；

/* pages/mystore/camera.wxss */
.photoes{width:150rpx;height:150rpx;}
button{margin:20rpx 0;width:150rpx;height:150rpx;border-radius:50%;line-height:150rpx;position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;bottom:50rpx;
}

在camera.js中；

// pages/mystore/camera.js
Page({takePhoto() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})}})},error(e) {console.log(e.detail)},/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

扫描二维码

scancode(){wx.scanCode({success:function(){console.log("scancode")}})}

e.target

在小程序中，可以通过e.target获取到点击的元素的一些属性

包括id offsetleft offsettop ，还可以通过data-*=“ ”，传一些值

在微信小程序中添加或修改样式

小程序并不支持在js中自由的修改样式，并没有doument对象，也就是活并不能通过document.getElementById来获取dom元素，也就不能自由的操作都没元素的样式

我通过以下的方式实现类似选项卡的功能；

index.wxml

<view class='navs'><view class='{{flag?"navsSon1 navsSon":"navsSon"}}' bindtap='meau' id="meau" data-text="text">点单</view><view class='{{flag1?"navsSon1 navsSon":"navsSon"}}' bindtap='talk'>评价</view><view class='{{flag2?"navsSon1 navsSon":"navsSon"}}' bindtap='shop'>商家</view></view>

zaiindex.wxss中定义两个样式

.navsSon{width:20%;height:100%;line-height:90rpx;text-align:center;
}
.navsSon1{border-bottom:5rpx solid yellowgreen;
}

在index.js中操作如下

pages({data{flag:false,flag1: false,flag2: false,},meau(){var that=this;that.setData({flag: true,flag1: false,flag2: false,})},talk(){this.setData({flag: false,flag1: true,flag2: false,})},shop(){this.setData({flag: false,flag1: false,flag2: true,})
})

navigiteTo跳转不会保存最下面的tab

地图/扫码/背景音乐

未完持续更新中

小程序踩坑日志（一）相关推荐

android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
tabbar角标小程序_【沃行课堂】恭喜你遇到“坑”，小程序踩坑指南
上周我们的开发小哥哥带领我们一起领略了开发中遇到的各种问题,以及基于SaaS模式的平台技术架构及实现.本周我们换个方向,由高级开发工程师秋哥带领大家共同探讨下小程序开发中踩过的坑.秋哥会从公司的几个小 ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
微信小程序踩坑—用户登录界面
最近做的一个项目有涉及到用户登录.微信小程序的用户登录在我看来有两种,一种是需要用微信提供的用户身份标识,简单地说就是小程序的登录者就是使用这个小程序的微信用户,还有一种是小程序和服务器之间有自己的一 ...
2021-08-21-智能/百度小程序踩坑
智能小程序/百度小程序踩坑-客服功能 1.智能小程序接入客服服务非常简单,但是我第一次搞客服功能认为就跟h5一样直接引入第三方的服务,然后使用调用js文件就可以了,但是,在小程序中只能使用官方提供的客 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
关于微信小程序踩坑之下载Word失败手机vConsole中提示：downloadfile:fail url not in domain list
下载文件失败提示:downloadfile:fail url not in domain list 1.看响应数据是否成功微信开发工具 -->Network 2.上传时一定要配置详情-& ...
微信小程序踩坑之微信支付提示商户未开通支付权限
继上次踩坑事件后我们现在API秘药都是采用数字+小写字母后面不多久公司就成为了微信服务商工作起来效率提高不少然鹅我今天又踩了一个坑给客户开通了微信支付客户不给账号给我登录拿不到里面的一些 ...
微信小程序踩坑记录 ------- canvas 生成带小程序码的微信朋友圈分享图
最近做了一个问卷类的小程序,其中的结果页想让用户进行朋友圈分享转发,网上搜索资料,得出解决思路,用 canvas 将页面绘制生成图片,然后保存到手机相册,最终效果如下: 在这里我只写页面里关于 can ...

小程序踩坑日志（一）

微信小程序踩坑日志

起步

新建一个项目后可能会报.wxss文件解析错误，解决方法是：

代码构成

初识小程序

不支持Dom操作

rpx布局

路由层级

小程序最多只能打开5个页面，当打开页面的个数达到5个以后，wx.navigateTo不能正常打开新的页面，请避免层级过多的交互方式，或使用wx.redirectTo重定向

tabBar底部导航栏

页面滚动到顶部

图片资源，css中背景图片

textarea在滚动页面中的BUG

window配置

设置网络请求的超时时间

Image标签图片

小程序可以监听小程序的关闭后，但是无法阻断

小程序第一次提交审核的时间比较后面的长

微信号，QQ号，手机号的正则验证

在微信小程序中添加了tabBar之后wx.navigateTo和wx.redirtTo不能进行跳转操作

设置背景色

设置换行和空格

微信小程序引入外部wxss

微信小程序引入iconfont

输入框

下拉加载

关于微信小程序下拉刷新组件加载图片（三个小点）不显示的问题

轮播图（swiper）

在使用swiper的时候，需要用swiper-item包起来，否则会出现图片显示不出来，但是也不报错的情况

初次使用swiper的的时候可能遇到当图片自动轮播到最后的时候，跳转到第一页的效果不友好，此时需要添加circular=“true” 无缝衔接

调用照相机

扫描二维码

e.target

在微信小程序中添加或修改样式

未完持续更新中

小程序踩坑日志（一）相关推荐

最新文章

热门文章

小程序踩坑日志（一）

微信小程序踩坑日志

起步

新建一个项目后可能会报.wxss文件解析错误，解决方法是：

代码构成

初识小程序

不支持Dom操作

rpx布局

路由层级

小程序最多只能打开5个页面，当打开页面的个数达到5个以后，wx.navigateTo不能正常打开新的页面，请避免层级过多的交互方式，或使用wx.redirectTo重定向

tabBar底部导航栏

页面滚动到顶部

图片资源，css中背景图片

textarea在滚动页面中的BUG

window配置

设置网络请求的超时时间

Image标签图片

小程序可以监听小程序的关闭后，但是无法阻断

小程序第一次提交审核的时间比较后面的长

微信号，QQ号，手机号的正则验证

在微信小程序中添加了tabBar之后wx.navigateTo和wx.redirtTo不能进行跳转操作

设置背景色

设置换行和空格

微信小程序引入外部wxss

微信小程序引入iconfont

输入框

下拉加载

关于微信小程序下拉刷新组件加载图片（三个小点）不显示的问题

轮播图（swiper）

在使用swiper的时候，需要用swiper-item包起来，否则会出现图片显示不出来，但是也不报错的情况

初次使用swiper的的时候可能遇到当图片自动轮播到最后的时候，跳转到第一页的效果不友好，此时需要添加circular=“true” 无缝衔接

调用照相机

扫描二维码

e.target

在微信小程序中添加或修改样式

未完 持续更新中

小程序踩坑日志（一）相关推荐

最新文章

热门文章

未完持续更新中