新手小白上手微信小程序这一篇就够了白话讲解小程序入门常用标签、语法对比vue 第一篇_vue和小程序

准备工作：

官网
注册小程序账号获取appid

微信开发者工具、微信开发者平台注册账号，获取appid。
没有账号也可以，微信开发者工具可以以游客的方式进入，会有部分功能不可用，但上手项目也是够用了。
当然，还是建议注册一个账号啦，不然不支持修改appid，也不能在手机端扫码预览效果。

小程序常用标签：

其实这些标签【类似于html的传统标签】的概念。这些标签是小程序底层封装好的，创建小程序项目，直接拿来用即可。
和vue组件不同的是：
1. 微信小程序的标签属性都是小写字母，或者小写字母和短横线拼接的方式。大写不识别，即功能失效。参考下面第1个标签的属性、事件。
2. vue中绑定动态属性或者组件传动态值都是:dada=“name”；
但是小程序中是**data="{{name}}"** 这种

1. text 【相当于span】，是一个行内元素。
   绑定事件和传参的示例：

<view 
	bindtap="handleClickTest" 
	data-param="我是实际绑定点击事件的传参"
>
	  <text 
	 	 data-param="我是绑定事件的子元素的传参"
	  >
	  	我是view的子元素text
	  </text>
</view>
1
2
3
4
5
6
7
8
9
10

注意：

1. 小程序中，绑定的事件不能添加括号，即bindtap=“handleClickTest()” ,会提示不是一个方法。
   绑定事件也可以这样使用bind:tap='handleClickTest'
2. 事件传参是在标签上定义data-开头的属性，就会发送给该事件。若后面参数名字和前面一样，会覆盖前面的参数值。
3. 取事件参数的时候：
   最好用**e.currentTarget.dataset** 更安全可靠，因为它总是引用的是你绑定事件的元素的数据属性
   e.currentTarget 表示绑定事件处理程序的元素，即当前元素。
   e.target.dataset 表示触发事件的元素，即实际点击的元素。
   此例子里：
   e.currentTarget.param对应的是‘我是实际绑定点击事件的传参’
   e.target.dataset .param对应的是‘我是绑定事件的子元素的传参’
   显然我们需要的参数是e.currentTarget.param。因为事件绑定的元素的传参是它。

2. view 【相当于div】，是一个块级元素
3. block 代码块 也【相当于是一个div】。当一个内容里有多个view标签或者其他复杂的结构，比如for循环动态生成的代码块，通常用block包裹下。
4. button同button；
5. image【拼写和常规不同img】，但用法一样，而且比常规img功能更强大。毕竟这是小程序底层封装的一个组件。

	<image src="../images/wxlogo.jpg"/>
	<image mode="scaleToFill" src="../images/wxlogo.jpg"></image>
1
2

6. template 模板【类似于vue中的slot】。
   name属性：模板的名字
   is属性：来指定指向的是那个模板
   data="{{XXX}}":使用模板的时候给其传递的参数。

 定义模板：
<template name="username">
    <view>姓名:{{name}}</view>
 </template>
 使用模板及模板传递参数：
 <template is="username" data="{{name}}"></template>
 
1
2
3
4
5
6
7

在外部wxml文件内定义的template的两种引入方式：import和include
import和include对比：

1. 都可以提升到顶部使用改模板,【类似于js中的var定义的变量】。比如第10行引入的改模板，在文件顶部就可以使用。
2. 使用方法一样：

<import src="item.wxml" />
<include src="item.wxml" />
1
2

3. 但是作用域不同。
   1. **import:**有作用域的概念。只引入目标文件中用template定义的代码块到本文件中。目标文件中引入的别的template和定义的其他非template定义的内容都不会被引入进来。简言之就是 import 不具有递归的特性。
   2. **include:**可以将目标文件中除了 外的整个代码引入，相当于是拷贝到 include 位置。该文件中的所有内容都会展示出来。【相当于vue中的组件了。】

目前学习的时候就用到了这些标签。后续有学习再补充。
如果不正确的地方欢迎指正~~~

小程序语法：

1. 事件绑定catchtap和bingtap：bindtap="XXXX" ，catchtap="XXXX",方法名后面不可加括号。参照上文标签1。

1. 事件是视图层到逻辑层的通讯方式。
2. 事件可以将用户的行为反馈到逻辑层进行处理。
3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

bingtap会向上冒泡;
catchtap不会向上冒泡;
自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap。建议使用后者冒号的形式。这样在微信开发者工具种鼠标悬停会提示该方法的名字，也有跳转到微信开发者文档该方法的说明。
事件冒泡： 从当前点击的事件触发一直向上冒泡到顶层标签。
事件捕获： 最外层的先触发一直到触发当前点击的元素。
事件捕获的只能用 capture-bind:tap，用 capture-bindtap不会触发。
同时bind和catch前还可以加上capture-来表示捕获阶段。
bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段。

2. 循环遍历：wx:for="{{list}}" wx:key="age" 。
1. 不用再像常规js用法那样要显示定义item和index。小程序中，默认会有item 和index在wx:for的执行环境中，直接拿来用即可。
2. 也可以修改它们名字：
wx:for-index="idx" wx:for-item="nowItem"
4. wx:k e y:
1. 可以绑定保留关键字 this，wx:key="*this"， 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。注意下。绑定this前面要加个*
2. 也可以绑定item中的某字段；wx:key="age"，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变
3. setData: js中，动态修改data的数据。
微信小程序中，即便直接修改data中定义的数据，虽然变量的值已经修改成功，但也不会触发视图的更新。必须要用setData来修改数据。

1.直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2.由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
3.不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。可以这样修改data中的数据 this.setData({"d[1].text": 'Goodbye'});
因为小程序的渲染层和逻辑层分别在两个线程中运行，所以setData传递数据实际是一个异步的过程，所以setData的第二个参数是一个callback回调，在这次setData对界面渲染完毕后触发。----来自官网。

 this.setData({
      userInfo: this.data.list[index]
    }, function() {
      // 在这次setData对界面渲染完毕后触发;即视图更新完成后的回调函数
    })
1
2
3
4
5

从这个例子我们可以看到3个点：
1.渲染层和数据相关。
2.逻辑层负责产生、处理数据。
3.逻辑层通过 Page 实例的 setData 方法传递数据到渲染层。

4. globalData: 设置、获取全局属性。其中，globalData是在项目全局配置文件app.js中的属性。

宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是App()
构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。—来自官网

`var appInstance = getApp()`//获取当前APP实例
appInstance.globalData
1
2

5. 导出和引入变量： 小程序中，用module.exports = {XXX: XXX}导出变量，用require引入变量，比如const a = require(‘./add’)。
导出类class 同es6语法。官网但是用module.exports导出，require也可以。

导出类：
  export {
	  addClass
	}
引入类：
	import { addClass } from './add'
1
2
3
4
5
6

6. 三目运算和字符串拼接：和js一摸一样。

<text>三目运算结果：{{num > 5 ? '大于5' : '小于5'}}</text>
<text>字符串拼接：{{'hello' + name}}</text>
1
2

7.条件判断wx:if：除了拼写和js不一样，功能用法一摸一样。

 	<view wx:if="{{num > 5}}">num大于5的条件渲染</view>
  	<view wx:elif="{{num == 5}}">num等于5的条件渲染</view>
  	<view wx:else>num小于5的条件渲染</view>
1
2
3

8. 关于样式：
1.内联和前端写法一样；不同点是绑定变量时， 变量加{{}}包裹即可。比如：

	<text style="color: {{dataColor}};">哈哈哈哈哈哈哈分割线</text>
1

2. 同级且和入口文件index.wxml同名的index.wxss不用显示引用；直接使用同名样式表的样式即可(同层级的任意.wxml文件都可直接使用不用引用)。
3. 引入外部wxss文件：@import 'XXXX'
   由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

补充：
页面路径需要在小程序代码根目录app.json中的pages字段声明，否则这个页面不会被注册到宿主环境中.

"pages": [
   	"pages/demo/index",
    "pages/index/index",
    "pages/logs/logs"  	
  ]
1
2
3
4
5

一个页面是分三部分组成：界面、配置和逻辑。界面由WXML文件和WXSS文件来负责描述，配置由JSON文件进行描述，页面逻辑则是由JS脚本文件负责。一个页面的文件需要放置在同一个目录下，其中WXML文件和JS文件是必须存在的，JSON和WXSS文件是可选的。
和index.wxml同名的index.js、index.wxss、index.json无需引入，就会被index.wxml自动识别、注入生效。额外新增的其他文件需要显示引入到对应文件中，才可生效。比如新增一个样式文件，要在index.wxss中引入才可生效：@import './style.wxss'

未完待续（后续会在下一篇中写）。。。。。。
如有不妥欢迎指正，谢谢~