微信小程序学习记录

环境配置

1、申请小程序ID
2、安装微信开发者工具
3、app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

配置字段：
page
window
tabBar
networkTimeout
4、project.config.json
相当于package.json
5、page.json
为每一个页面，配置自己的属性。app.json是全局的。

6、JSON语法
key值必须是双引号包裹。
没有注释。
数据用[]，，对象用{}

数据绑定

wx:if
wx:for

wxss

全局样式和局部样式。
app.wxss和page.wxss。（和app.json,page.json一样）

新增单位rpx，适配不同dpr设备。

绑定事件

bandtap绑定点击事件。

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

catchtap阻止冒泡。

wxs导入 “js”文件并引用

dataset自定义数据

dataset
在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

mark和dataset类似。主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。

动态绑定class

rgba和opacity透明

opacity会让盒子的内容也跟着透明
rgba只透明背景

1、组件内不能使用id选择器，属性选择器等

2、浮动元素无法点击?

需要为浮动元素设置position：relactive；才能点击。
3、浮动元素不影响标准流布局，但会影响文字布局，挤开文字。

微信小程序和vue动态绑定class的区别

微信小程序单条件class=“{{ index2 ? ‘active’:’ ’ }}”
微信小程序多条件class="{{ index1 ? ‘active’:’ ’ }} {{ index2 ? ‘activeT’:’ ’ }} {{ index3 ? ‘activeH’:’ ’ }}"(以空格分隔)

VUE 单条件判断 :class=" index1? ‘active’:’ ’ " 或者 :class="{borderbottom:index1}"
VUE 多条件判断 :class="{‘redRoom’: items.status=== 1, ‘greenRoom1’: Number(items.status) === 2, greenRoom2: Number(items.status) > 2}"(以，分隔)

链接：https://www.jianshu.com/p/7f6951dd1597

脱离标准文档流

1、float
2、position: fixed/absolute

flex布局

1、flex内浮动无效。
2、水平居中
3、垂直居中
flex-direction属性，设置布局方向。主轴方向
justify-content设置对齐方向。主轴上的对齐方式

align-items，垂直居中。交叉轴上的对齐方式。

项目上的属性：
order
flex-grow，比例划分，再套一层盒子。
align-self属性，定义自己独特的align-items属性。

flex项目被挤压问题

产生原因：子项目大于父容器
解决方法：
给被挤压项目设置属性：flex-shrink：0

• 合理使用div
  使用h，ul，li，button，

外边距合并问题：

父级元素增加border,overflow
使用定位或者是浮动
使用padding-top替代margin-top,。

组件和页面

都有四个文件，js,json,wxml,wxss.

组件中的js文件，用Component({}）包裹着。properties定义属性，data定义数据，methods定义方法。

页面中的js，用Page（{}）包裹着，data定义数据，函数直接写。

css背景不支持路径导入解决

问题：

解决：

tab页面切换

在app.js中wx.hideTabBar()。
隐藏默认的tabbar。

app.json注册tab页面。

在点击事件，写wx.switchTab()页面切换。

position: relative偏移后，原位置占位问题

在外面再套一层盒子。

html规范

1、每一个块级元素另起一行。
2、行尾不留空格
3、四个空格缩进
4、大模块之间空行隔开
5、属性和值，全部小写！每个属性都必须有一个值。值加双引号。
6、

css规范

1、css组间留空行
2、定位布局 > 盒模型 > 字体 > 颜色外观 > 动画。 顺序书写
Positioning Model 布局方式、位置，相关属性包括：position, top, z-index, display, float等
Box Model 盒模型，相关属性包括：width, height, padding, margin，border,overflow
Typographic 文本排版，相关属性包括：font, line-height, text-align
Visual 视觉外观，相关属性包括：color, background, list-style, transform, animation

3、一行一个选择器
4、命名规则，中斜杠
5、颜色16进制代码缩写
6、去掉小数点的0
7、使用简写。

逗号隔开多个选择器
使用多种选择器，防止class的滥用

父子组件数据通信

① 属性绑定
组件中，properties定义属性。父向子传递。

② 事件绑定
子向父传递。
1、创建事件：
this.triggerEvent(‘自定义事件名称’, {参数对象})
2、绑定事件：
3、在父组件中，子组件标签上，bind :自定义事件名称="父js事件处理函数"
通过 e.detail 获取到子组件传递过来的数据

子组件：

// 子组件中的 wxml结构
<text>子组件中，count值为： {{count}}</text>
<button bindtap="addCount">+1</button>
// 子组件中的js代码
methods: {
  addCount() {
    // this.setData这行代码写的很多此一举
    // 因为只要父组件修改了它传递到子组件的数据, 子组件自然就随之进行更新了
    this.setData({
      count: this.properties.count + 1
   })
    // 使用 this.triggerEvent去触发父组件的自定义事件
    // 并将数值同步给父组件
    this.triggerEvent('sync', {value: this.properties.count})
    }
   }

父组件：

<my-test3 count="{{count}}" bind:sync="syncCount"></my-test3>

// 父组件的js文件
syncCount (e) {
  this.setData({
    // 父组件通过事件对象 e 获取到子组件传递的值
    count: e.detail.value
 })
}

③ 获取组件实例
父组件还可以通过 this.selectComponent() 获取子组件实例对象
这样就可以直接访问子组件的任意数据和方法

<!--父组件的wxml文件-->
<my-test class="cusstomA" id="cA" count="{{count}}" bind:sync="syncCount">
</my-test>
<button bindtap="getChild">获取子组件实例</button>
//父组件的js文件 按钮的tap事件处理函数
getChild() {
  // 切记下面的参数不能传递标签选择器，不然返回的是null
  // 也可以传递ID选择器
  const child = this.selectComponent('.customA')
  // 调用子组件的setData方法，修改count的值，
  child.setData({ count: this.data.count + 1 })
  child.addCount() // 直接调用子组件的addCount方法，该方法在child实例对象的__proto__上可以访问到该方法
}

vue组件通信

1、父向子传递 props
props: [‘message’] //声明一个自定义的属性

2、$ref获取实例

3、子向父$emit
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

子组件：
自定义事件，

<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
 mounted: function () {
  this.$emit('getMessage', '我是父组件！')
 }
 }
</script>

父组件：
@getMessage=“showMsg”
绑定子组件中自定义的方法，emit中的参数传递给showMsg。

<template>
 <div>
 <h1>{{title}}</h1>
 <child @getMessage="showMsg"></child>
 </div>
</template>

<script>
 import Child from '../components/child.vue'
 export default {
 components: {Child},
 data(){
  return{
  title:''
  }
 },
 methods:{
  showMsg(title){
  this.title=title;
  }
 }
 }
</script>

properties是公开的，data是私有的。

数据引用

微信小程序：引用数据，this.data.
vue： this.就行

e.currentTarget.dataset.

参数传递

小程序：data-，，，event获取
vue:直接定义参数
页面传参：
navigationTo，url传参？data=”xxx"
页面的onload（options）接收参数

input标签

input标签不能用file，选择文件调用wxAPI。
placeholder-class=“”
定义input框的placeholder文字样式。

setData的同步异步

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

JS判断两个看起来相同的字符串不相等问题

encodeURIComponent(str) 可查看字符串完整内容。