微信小程序

 

1.var app = getApp();引入整个项目的app.js文件，用来获取期中的公共变量等信息。

    如果要使用util.js工具库中的某个方法，在util.js中module.exports导出，然后再需要的页面中require即可得到

2.想要获取app.js中的gloabData中的doubanBase，在index.js中使用app.gloabData.doubanBase即可取到这个值。

3.接下来在整个page（{}）中，第一个data，就是本页面组建的内部数据，会渲染到该页面的wxml文件中，类似vue，通过setData修改data数据，驱动页面的渲染

4.生命周期函数：onload（）监听页面加载，onready（）页面初次渲染，onshow（）页面显示，onhide（）页面隐藏

5.wxml模板的使用：在组建内部的name属性中写好组建的名字，然后import引入的时候通过name获取即可

6.常用的wxml标签：view（div），text（span），icon，swiper，block，scroll-view

注意点：

1.每个页面顶部导航栏的颜色，title在本页面的json中配置，如果没有配置的话，去app.json中的总配置，在app.json

中没有注册该页面会报错

2.json中不能写注释，会报错

3.使用wx.switchTab跳转tab页的话，在app.json中除了注册pages页面，还需要在tabBar中注册tab页，才能生效。注意：tab最多5个，也就是底部最多5个菜单。其他页面只能通过其他路由的方法打开

4.wx.navigateTo是跳到某个非tab页，在app.json中注册后使用，保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack  可以返回到原页面

5.wx.reLaunch跳转，新开的页面上角是没有退回按钮，切换城市的时候。

6.页面之间传递参数

参数写在跳转的url之中，然后另一个页面在onload方法中的传参option接收到。如下传递和获取id

7.data-开头的自定义属性的使用

比如wxml中我们怎么写 

点击的事件对象可以这么取，var postId = event.currentTarget.dataset.postid;

注意： 大写会转换成小写，带_符号会转成驼峰形式

8.事件对象event，event.target和event.currentTarget的区别：

   target指的是当前点击的组件和currentTarget指的是事件捕获的组件

比如，轮播图组件，点击事件应该要绑定到swiper上，这样才能监控任意一张图片是否被点击，

这时target这里指的是image（因为点击的是图片），而currentTarget指的是swiper（因为绑定点击事件在swiper上）

9.wxss有一个坑：无法读取本地资源，比如背景图片用本地就会报错。

把本地图片弄成网络图片的几种方式： 上传到个人网站；QQ空间相册等等也是可以的

10.微信小程序跳转到另一个小程序

wx.navigateToMiniProgram({
      appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid
      path: 'page/index/index', // 跳转的目标页面
      extarData: {
        open: 'auth'
      },
      success(res) {
        // 打开成功  
      }
}) 

11. hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。

       <view hover-class="bg_red">这是一段文字</view>

12.注意：设置换行和空格必须在text标签中，\t 空格  \xa0 空格  \n 换行

13.设置背景颜色在app.wxss

page{

background-color="#fff";

}

 14.下拉加载两种方法

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

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

B.单个页面设置 使用这种方法，只给单独页面添加下拉加载功能必须结束，否则会一直在加载状态

找到你需要添加下拉加载功能的wxml页面，找到其对应的.json文件
{

  "enablePullDownRefresh": "true" //添加这句话
}

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

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

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

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

16.微信小程序添加或者修改样式

小程序不支持在js中自由的修改样式，并没有document对象，也就是并不能通过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,
    })
})

17.微信小程序解析html富文本插件wxparse的使用

    第一步：下载把wxparse文件放到根目录下

    第二步：引入<import src="../../wxParse/wxParse.wxml"/>  在xx.wxml页面

    第三步：引入@import "../../wxParse/wxParse.wxss";在xx.wxss页面

    第四步：引入var WxParse = require('../../wxParse/wxParse.js'); 在xx.js页面

    第五步：

onLoad()方法里使用

article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)

单条数据
/** 
* WxParse.wxParse(bindName , type, data, target,imagePadding) 
* 1.bindName绑定的数据名(必填) 
* 2.type可以为html或者md(必填) 
* 3.data为传入的具体数据(必填) 
* 4.target为Page对象,一般为this(必填) 
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) 
*/  

模板使用：

多组数组循环

/**
* WxParse.wxParseTemArray(temArrayName,bindNameReg,total,that)
* 1.temArrayName: 为你调用时的数组名称
* 3.bindNameReg为循环的共同体 如绑定为reply1，reply2...则bindNameReg = 'reply'
* 3.total为reply的个数
*/
var that = this;
WxParse.wxParseTemArray("replyTemArray",'reply', replyArr.length, that)

 模板使用：

 

18.微信小程序使用过滤器

    在pages下新建 .wxs文件

var loaclData = function（value）{
  var date = getDate(value * 1000);
    var Month = date.getMonth() + 1;
    var Day = date.getDate();
    var hours = date.getHours(); //计算剩余的小时
    var minutes = date.getMinutes(); //计算剩余的分钟
    var Y = date.getFullYear() + '-';
    var M = Month < 10 ? '0' + Month + '-' : Month + '-';
    var D = Day + 1 < 10 ? '0' + Day + '' : Day + '';
    var H = hours < 10 ? '0' + hours + ':' : hours + ':'
    var m = minutes < 10 ? '0' + minutes : minutes;
    return Y+M + D + "   " + H + m;
}
module.exports = {
    localData: localData
}
在wxml文件中引用wxs文件
<wxs src="./filters.wxs" module="localData" />
<text class="scoreText">{{localData.filterScore(item.shop.score)}}分</text>