小程序踩坑日志（一）

微信小程序踩坑日志

起步

• 申请账号
• 查看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 不保持纵横比缩放图片，是图片填满image

mode="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

地图/扫码/背景音乐

未完 持续更新中