微信小程序的制作入门 以及微信小程序的简介 以及与普通的web开发的异同点

微信小程序的制作入门 以及微信小程序的简介 以及与普通的web开发的异同点

时至今日，微信这个应用软件可谓深入千家万户。而微信公众平台也成为了继微博后的又一个可以提供流量入口的地方。在如今这个流量为王的时代，如何增加并留住自己的微信公众平台的流量呢？除了优质的推送外，让使用者更方便使用的小程序也是一个要点。那么今天我们就来聊一聊微信小程序的开发。

1. 微信小程序的简介
   小程序的内核是腾讯自主研发的X5内核，是基于webkit基于优秀开源Webkit 深度优化的浏览器渲染引擎。其实就是说，小程序的内核是基于开源的webkit的。然后能由于操作系统的不同，小程序在功能实现上有一些差异。
   官方开发手册网址：https://developers.weixin.qq.com/miniprogram/dev/
   下面来自官方文档：

运行环境差异
微信小程序运行在三端：iOS、Android 和 用于调试的开发者工具。

三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中，是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10
在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析，是由 X5 基于 Mobile Chrome 53/57 内核来渲染的
在 开发工具上， 小程序的 javascript 代码是运行在 nwjs 中，是由 Chrome Webview 来渲染的
尽管三端的环境是十分相似的，但是还是有些许区别：

ES6 语法支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避。详情

wxss 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题 详情，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

ok，其实在日常的开发中，各浏览器所使用的内核不同而导致的js css语法不同也是很常见的，所以微信小程序的此类差异并不是很影响开发。文中提到了es6，es6有什么呢？
我印象中es6有let const 以及箭头函数这三个常用新特性。此外还加了什么默认参数和不定参数，以及for of渲染，class类，还有一大堆和后端差不多的特性。

1. 微信小程序的开发环境
   目前还只有一款，官方文档上的微信开发者工具。里面有编辑器，以及调试工具，还能在手机上预览效果。开发效果：
   
   功能很齐全，美中不足的是编译的速度太慢了，要等好几秒。而且电脑上调试时，微信的很多api都不能检测效果。

2. 与平常web开发的不同点
   html层面 微信将其更名为了wxml
   并且标签数量减少了很多。（没有a标签）。
   常用的且发生变化的标签有view（html中的div）text（html中的span） image （html中的img，并且image是双标签，wxml中没有单表签，而html中的img是单表签）。html中可以使用类vue的数据绑定与列表渲染。

   css层面
   微信将其更名为wxss，并且属性和选择器也减少了很多。
   但是#id选择器 .css选择器 标签名选择器 以及伪类选择器 依然在。
   还有写长度单位的时候 往常都是px或是百分比，现在要用rpx，不用考虑机型的适配问题了！rpx就是另一种百分比的体现。

   js层面
   微信里的js主要使用了类似vue的框架，里面与html的交互也很类似。
   不同点也有 例如
   1 .标签里的属性绑定变量也要用双花括号括起来，而vue不用。
   2.引用data里的数据要加要在变量名前加 data.
   3. 使用延迟函数等函数内包括函数的函数时，this指针会指向延迟函数等函数 要在指向点添加 var that = this ，使用that指向要指向的点。
   4. 没有dom和bom操作 要使用微信提供的接口
   5. 没有v-model双向绑定 要实现双向绑定只能自己通过接口获取值并赋值给绑定的另一个变量。

暂时就想到那么多 就写到这里啦。