开发环境搭建—微信小程序篇

小程序概述

2018年1月才给个人开发者开放权限。当初用“跳一跳”进入了大家的视野。

小程序到底有没有把我们写的js、html、css翻译为ios、android程序呢？

答：半翻译。视图层面的都是webview控件，直接呈递网页；功能层面比如震动、定位、陀螺仪xyz、摄像头都被翻译为原生ios和android了。

但是，张小龙留了一手，它让我们不能使用HTML标签，只能使用<view>、<text>这样的标签。这些标签会被翻译为<div>和<span>，不让我们直接用<view>和<text>。因为怕以后机理进行更改。今后可能会翻译HTML、CSS到ios、android。现在就让程序员适应。

小程序背后有没有webpack？

答：有webpack类似的东西，但是不是webpack。一些通用库，包括UI库都能够直接集成进去。但是不是npm install 了，而是github上下载zip包，解压缩到小程序哪里，配置一下，这样的思维。

小程序的生态？

答：太好了！weui、mintui、mpvue（用vue开发小程序）、canvas、插件非常丰富。

小程序的入口很丰富：

① “发现” → “最底下有一个小程序” → “搜索小程序”

② 微信首页下拉，找到圆圈们就是小程序。

③ 腾讯推出了“小程序码”，就是二维码，可以直接进入到指定小程序，甚至是小程序的指定页面、已经有指定数据在上面了。

④ 朋友圈点击连接，进入小程序的超链接。

开发之前要去mp.weixin.qq.com去申请账号，得到自己的ssid。这里不多说，太简单了。免费的，只需要有email即可。

小程序编程量不大，就用它的工具即可。

2 项目结构和page

填写AppID，每个人不同：

快速启动模板。         

app.js文件负责获得一些敏感权限，比如用户的姓名啥的。

这个文件用App({})包裹

app.json用来配置有哪些pages（页面）、顶部栏的颜色、底栏的图标啥的。

pages数组中加入一个项，自动创建文件夹和它的四文件了：js、json、wxml、wxss

配置参考：

https://developers.weixin.qq....

选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

app.wxss  微信使用wxss进行样式书写，和CSS完全一样，但是没有less、没有变量。

wxss中和CSS完全一样，多了一个单位rpx。任何屏幕都是750rpx。

相当于rem布局了。

CSS怎么写您就怎么写：浮动、flex、定位、3D变形都能用！！

project.config.json文件一点用没有，它里面都是用可视化界面“设置”能够改的。

任何一个页面都要放到一个文件夹中，一个page是四个文件：js、json、wxml、wxss。它们之间的关系天生存在，不需要link、script、import等等。

3 MVVM模式和wxml的指令

数据变了，视图自动变

数据驱动。

和Vue相比：

data是对象，不是函数了。

**事件处理函数，散着放，不要放在methods里面了
**

函数不能传参，必须使用data-

改data必须使用setData改。

绑定监听用bindtap、bindchange等。参数用data-n、data-m。不能加圆括号

用e.target.dataset.n来得到data-n

比如类名的动态：

循环：

能循环常数：

wxs是微信脚本的意思，里面用NODEJS风格的标准CMD进行暴露。

页面跳转带参数（面试常考），用类似GET请求的?形式。但是注意，这里不涉及服务器，所以不是真正的GET请求参数，是一个语法约定。

生命周期（面试常考）：

https://developers.weixin.qq....

都要补on前缀，它的首字母大写，比如onReady、onMoved

4 内置组件、内置API

选择照片（或者拍照）进行上传

内置组件是四维一体：UI界面（CSS样式）、事件监听、数据的传入传出、配置参数。

如果你要用别的UI组件库，比如WeUI或者iViewUI-weApp都是四维一体。

内置组件已经帮你屏蔽了ios和安卓的差异，都能够兼容运行。

首先你要写nodejs程序，写express + formidable处理上传请求。

注意！！注意！！注意！！小程序中有一个重要配置：

打勾：

比如让用户选择一张手持身份证的照片，或者身份证的正面、背面。

步骤：选图 → 上传

它自己帮你进行了代理跨域，代理跨域的服务器是qq的主线服务器，网速特别快。

加速器