原生小程序开发基础知识_小程序原生开发

一、网页开发渲染线程和脚本线程是互斥的，小程序的逻辑层和渲染层是分开的。 

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用 JsCore 线程运行 JS 脚本。

二、小程序的运行环境

三、JSON文件

都是被包裹在一个大括号中 {}，通过 key-value 的方式来表达数据，其中 Key 必须包裹在一个双引号中。JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。（json中无法添加注释）

（1）数字，包含浮点数和整数

（2）字符串，需要包裹在双引号中

（3）Bool值，true 或者 false

（4）数组，需要包裹在方括号中 []

（5）对象，需要包裹在大括号中 {}

（6）Null

四、小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）

（1）Page 构造器和Component 构造器都可注册页面，Component 构造器的主要区别是：方法需要放在 methods: { } 里面。

五、WXS语言

1.wxs响应事件：对于有频繁用户交互的小程序，减少逻辑层和视图层通信的次数，从而避免卡顿

        使用 WXS 函数用来响应小程序事件，目前只能响应内置组件的事件，不支持自定义组件事件。WXS函数接受2个参数，第一个是event，在原有的 event 的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。

 使用方法：利用change:prop以及{{}}绑定事件，当 prop 的值被设置 WXS 函数就会触发

<view change:prop="{{test.propObserver}}" prop="{{propValue}}" bindtouchmove="{{test.touchmove}}" class="movable"></view>

六、事件系统

冒泡事件包括：触摸相关事件、动画相关事件

普通事件绑定：bind，阻止冒泡绑定：catch，互斥事件绑定：mut-bind

七、初始渲染缓存

页面初始化分为

逻辑层初始化：载入必需的小程序代码、初始化页面 this 对象（也包括它涉及到的所有自定义组件的 this 对象）、将相关数据发送给视图层。

视图层初始化：载入必需的小程序代码，然后等待逻辑层初始化完毕并接收逻辑层发送的数据，最后渲染页面。

八、组件

九、小程序框架与vue的区别

1.生命周期

• 小程序：onLoad、onShow、onReady、onHide、onUnload

• vue: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

• Vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

• 小程序有页面生命周期和组件生命周期的区分，组件也可以在pageLifetimes中定义页面的生命周期

  

2.数据请求时间

• 小程序一般在onLoad、onShow

• vue一般在created、mounted

3.元素显示与隐藏方式

• 小程序通过wx-if和hidden

• vue通过v-if和v-show

4.数据绑定方式

• 小程序绑定某个变量的值为元素属性时，会用两个大括号括起来，如果不加括号，为被认为是字符串。

• vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号（v-bind）。

5.数据双向绑定不同

• 小程序中，当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过this.setData({key:value})来将表单上的值赋值给 data中的对应值。

• vue通过v-model绑定 data中对应的一个值，当表单元素内容发生变化时， data中对应的值也会相应改变。

6.事件绑定方式

• 小程序用bindtap=''、catchtap=''来绑定事件

• vue通过v-on:event或者@event绑定事件

7.绑定的事件传参方式不同

• 在小程序中，不能直接在绑定事件的方法中传入参数，需要将参数作为属性值，绑定到元素上的 data-属性上，然后在方法中通过 e.currentTarget.dataset.*的方式获取，从而完成参数的传递。

• 在vue中，绑定事件传参只需要在触发事件的方法中，把需要传递的数据作为形参传入。

8.父子组件通信方式不同

• ①子组件创建不一样：

在vue中需要：
1、编写子组件；
2、在需要使用的父组件中通过 import引入；
3、在 vue的 components中注册；
4、在模板中使用。
-----------------------------------------------
在小程序中需要： 
1、编写子组件  
2、在子组件的 json文件中，将该文件声明为组件；
3、在需要引入的父组件的 json文件中，在 usingComponents填写引入组件的组件名以及路径；
4、在父组件中，直接引入即可；

• ②父子组件传值不一样：

在vue中，
父组件向子组件传递数据，只需要在子组件通过 v-bind传入一个值，在子组件中，通过 props接收，即可完成数据的传递，子组件和父组件通信可以通过 this.emit将方法和数据传递给父组件。
子组件给父组件传数据时，父组件给子组件绑定一个方法，子组件通过this.$emit('event',params)将参数传给父组件
---------------------------------------------
在小程序中，
父组件直接将值赋值给一个变量，在子组件 properties中，接收传递的值。
子组件给父组件传数据时，父组件给子组件绑定一个方法，子组件通过this.triggerEvent('event',myEventDetail,myEventOption)将信息传给父组件
 

其中myEventOption可包含：

 

• ③如果父组件想要调用子组件的方法