原生小程序学习小结，mpvue+mpvue-weui+fyl.js小程序项目搭建笔记
zzrshuiwuhen 2019-06-29
官方文档：https://developers.weixin.qq....
学习小结：
1、小程序、订阅号及服务号都是在微信公众平台的体系下，但小程序本身与订阅号及服务号是完全独立的，需要重新注册；
2、前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，官方文档中都有明确的使用介绍，上手容易；
3、小程序与H5开发区别：
H5开发：
需要考虑使用开发工具（webstorm,vscode、sublimtext、Atom等），前端框架（Angular、react、vue、backbone等）,任务管理工具（Webpack 、Grunt、Gulp等），浏览器兼容性等；
小程序：
开发工具（微信开发者工具），框架（小程序框架），不能直接引入前端框架，没有window变量，但微信提供了wx全局方法集。无法操作DOM，通过改变page data来改变视图展现。数据绑定采用Mustache双大括号语法。事件绑定和条件渲染，全部写在WXML中。
4、小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现；
5、小程序支持原生javascript吗？
JavaScript的三大组成部分——ECMAScript、DOM（文档对象模型，对应document对象）、BOM（浏览器对象模型，对应window对象）。
小程序支持ECMAScript，但不支持document，window对象。
小程序相关技术：
原生小程序开发技术栈：
1、WXML。微信标记语言，用于展示UI模板，类似HTML，文件后缀名为“.wxml”。
2、WXSS。WeiXin Style Sheets，用于规定UI样式，具有 CSS 大部分特性。在CSS基础上扩展了尺寸单位和样式导入。文件后缀名为“.wxss”
3、WXS。WeiXin Script。封装后的JS，一般内嵌于WXML页面，很方便构建页面，标签为”<wxs></wxs>"。
4、JS。普通的JavaScript，常用于控制整个页面的逻辑。后缀名为“.js”
5、JSON。用于项目全局配置或单页面配置，后缀名为“.json”。
开源框架：
1、WePY。是腾讯开源的一套语法接近vue.js，快速开发小程序的框架，微信组件化框架，类Vue.js风格，让Web App的开发者更容易开发小程序。类Vue.js风格；支持引入NPM包、组件化开发、ES2015+特性、Promise、多种编译器(Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug)等。
2、mpvue。使用 Vue.js 开发小程序的前端框架，美团点评团队出品。在最理想的状态是，可以一套代码可以直接跑在多端：WEB、小程序（微信和支付宝）、Native（借助weex）。使用该框架，Vue开发者几乎可以无缝开发小程序。
服务端通讯：
1、Flyio。强大的http请求库；微信小程序的 javascript 运行环境和浏览器不同，页面的脚本逻辑 是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，
JsCore中也没有 XmlhttpRequest对象，所以jquery 、zepto、axios这些在小程序中 都不能用，而此时，正是 fly 大显身手的时候。
UI框架：
1、WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
2、mpvue-weui 基于 mpvue 框架，重写 WeUI，基于小程序原生组件，mpvue 完美支持；快捷开发，只需引入 weui.css
赛宜居2.0技术栈：
1、框架：mpvue; 2、UI组件库:mpvue-weui; 3、服务端通讯：Fly.js;
项目搭建：
- 先检查下 Node.js 是否安装成功（如没有需要自己去安装）
$ node -v
$ npm -v
- 全局安装 vue-cli
$ npm install --global vue-cli
- 创建一个基于 mpvue-quickstart 模板的新项目 project
$ vue init mpvue/mpvue-quickstart project
- 安装依赖
$ cd project
$ npm install
$ npm run dev
随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。
在微信开发者工具中打开文件（目录：projectdistwx）看效果：
用vcode（自己趁手的编辑器或者IDE）打开 project 中的 src 目录下的代码试试，src中的改动，会实时编译到微信开发者工具中打开文件中，可以看到实时效果（注意：新增的页面需要重新 npm run dev 来进行编译）
mpvue框架构建小程序项目的demo完毕
以后就在src目录下进行赛宜居2.0小程序开发
引入mpvue-weui;
在static目录下自己新建/weui/weui.css（https://github.com/KuangPF/mp...）
main.js文件下import引入weui.css：
import '../static/weui/weui.css'
引入Fly.js;
使用npm安装fly.js：
$ npm install flyio
引入：
var Fly=require("flyio/dist/npm/wx") ;//npm引入方式
var fly=new Fly(); //创建fly实例
后续再封装
添加scss支持：
npm i sass-loader node-sass --save-dev
<style lang="scss" scoped> // 注意：增加scoped属性的作用是限定当前组件样式的作用域仅作用域当前组件
$color: #417ccc;
.page {
background: $color;
}
</style>添加resect.css
在static目录下自己新建/style/resect.css
html标签控制的样式会转换为page标签的样式
详情页面navigationBarTitleText设置
新建main.json,代码如下：
{
"navigationBarTitleText": "切换社区"
}登录加密
login.js页面：
var md5= require('../../utils/md5.js');
var wxPassWord = md5.hex_md5('123456');/utils/新建md5.js文件，
代码略
module.exports = {
hex_md5//需要输出的加密算法
}请求Request Payload VS Form Data的区别（后台接收不到对应的请求参数）
header是默认值'content-type': 'application/json' post请求时是Request Payload格式，
header改为：
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},请求的是Form Data格式，后台能正常接收了
贴下登录的密码
wx.login({
success: function (res) {
var URL = wx.getStorageSync('URL_S') +'wx/wx_mini_user_login.json';
if (res.code) {
debugger;
var wxCode = res.code;
var wxPassWord = md5.hex_md5(wxCode + md5.hex_md5(pwd.trim()));
wx.request({
url: URL,
method: 'POST',
data: {
username: phone,// 用户输入的账号
password: wxPassWord, // 用户输入的密码
code: wxCode
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
// 登录成功
debugger;
if (res.data.code == 0) {
wx.switchTab({
url: '../switchtab/home/home',
})
}
}
})
} else {
console.log('获取用户登录态失败！' + res.errMsg)
}
}
}); 