初次微信小程序需要记住的一些点

本热从web转小程序学习，拥有vue的学习基础，学起来并不会特别吃力，在这里记录一些知识点加深记忆，当然直接看文档是最好的

1.开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

const appInstance = getApp()
console.log(appInstance.globalData)

2.对于小程序中的每个页面，都需要在页面对应的 js 文件中调用 Page 方法注册页面示例(直接输入page有提示)。
3.navigator里面的open-type设定有点多

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

4.可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。推荐开发者采用 module.exports 来暴露模块接口

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require 将公共代码引入

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

5.通过全局函数 getApp 可以获取全局的应用实例

var app = getApp()
app.globalData++

6.小程序的API有以下几类

• 事件监听 API，以 on 开头，这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。
• 同步 API，以 Sync 结尾的 API 都是同步 API，同步 API 的执行结果可以通过函数返回值直接获取。
• 异步 API，大多数 API 都是异步 API，如 wx.request，wx.login 等，这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接口调用结果：success（调用成功），fail（调用失败），complete（都会执行），其他（自定义）。success，fail，complete 函数调用时会传入一个 Object 类型参数，errMsg（错误信息，如果调用成功返回 ${apiName}:ok），errCode（错误码，仅部分 API 支持，成功时为 0。）。

success(res) {
	if(res.data.code===0){执行操作}
}

7.视图层

• WXML，有自己的命名和使用规则，不能完全直接用html去用。
• WXSS,与css差不多，WXSS 对 CSS 进行了扩充以及修改。rpx : 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• 样式导入
  使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
  示例代码：

@import "common.wxss";

8.WXS是小程序的一套脚本语言,结合 WXML，可以构建出页面的结构。在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。(jsp变异版本?)

9.事件, 将用户的行为反馈到逻辑层进行处理

• 如bindtap当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

在js中

Page({
  tapName: function(event) {
    console.log(event)
  }
})

使用WXS函数响应事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：

• 在组件中绑定和注册事件处理的WXS函数

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**

• test.wxs文件实现tapName函数

function tapName(event, ownerInstance) {
 console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
 tapName: tapName
}

10.动画, 可以使用 wx.createAnimation 接口来动态创建简易的动画效果。

• transitionend CSS 渐变结束或 wx.createAnimation 结束一个阶段
• animationstart CSS 动画开始
• animationiteration CSS 动画结束一个阶段
• animationend CSS 动画结束

11.不支持使用 eval 执行 JS 代码，不支持使用 new Function 创建函数
12.在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点，默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

此时，可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

使用时，用 slot 属性来将节点插入到不同的slot上。

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

主要注意的点:

• 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器
• 避免使用后代选择器（.a .b）
• 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间

13.自定义组件的样式只受到自定义组件 wxss 的影响，除非其它地方用了标签选择器，以及组件内部进行了声明

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了
• apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

14.组件希望接受外部传入的样式类,此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类
在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

在 2.7.1 之后，可以指定多个对应的 class 。

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />
<!-- 以下写法需要基础库版本 2.7.1 以上 -->
<custom-component my-class="red-text large-text" />

其余的内容以及详细的部分直接去查阅官方文档就好了，需要用到再去查看也是很好的