原生小程序学习小结，mpvue+mpvue-weui+fyl.js小程序项目搭建笔记

官方文档：https://developers.weixin.qq....

学习小结：
一、小程序、订阅号及服务号都是在微信公众平台的体系下，但小程序自己与订阅号及服务号是彻底独立的，须要从新注册；

二、前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，官方文档中都有明确的使用介绍，上手容易；

三、小程序与H5开发区别：
H5开发：
须要考虑使用开发工具（webstorm,vscode、sublimtext、Atom等），前端框架（Angular、react、vue、backbone等）,任务管理工具（Webpack 、Grunt、Gulp等），浏览器兼容性等；
小程序：
开发工具（微信开发者工具），框架（小程序框架），不能直接引入前端框架，没有window变量，但微信提供了wx全局方法集。没法操做DOM，经过改变page data来改变视图展示。数据绑定采用Mustache双大括号语法。事件绑定和条件渲染，所有写在WXML中。

四、小程序的视图层目前使用 WebView 做为渲染载体，而逻辑层是由独立的 JavascriptCore 做为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具有数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上经过两边提供的 evaluateJavascript 所实现；
五、小程序支持原生javascript吗？
JavaScript的三大组成部分——ECMAScript、DOM（文档对象模型，对应document对象）、BOM（浏览器对象模型，对应window对象）。
小程序支持ECMAScript，但不支持document，window对象。

小程序相关技术：

原生小程序开发技术栈：
一、WXML。微信标记语言，用于展现UI模板，相似HTML，文件后缀名为“.wxml”。

二、WXSS。WeiXin Style Sheets，用于规定UI样式，具备 CSS 大部分特性。在CSS基础上扩展了尺寸单位和样式导入。文件后缀名为“.wxss”

三、WXS。WeiXin Script。封装后的JS，通常内嵌于WXML页面，很方便构建页面，标签为”<wxs></wxs>"。

四、JS。普通的JavaScript，经常使用于控制整个页面的逻辑。后缀名为“.js”

五、JSON。用于项目全局配置或单页面配置，后缀名为“.json”。

开源框架：
一、WePY。是腾讯开源的一套语法接近vue.js，快速开发小程序的框架，微信组件化框架，类Vue.js风格，让Web App的开发者更容易开发小程序。类Vue.js风格；支持引入NPM包、组件化开发、ES2015+特性、Promise、多种编译器(Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug)等。

二、mpvue。使用 Vue.js 开发小程序的前端框架，美团点评团队出品。在最理想的状态是，能够一套代码能够直接跑在多端：WEB、小程序（微信和支付宝）、Native（借助weex）。使用该框架，Vue开发者几乎能够无缝开发小程序。

服务端通信：
一、Flyio。强大的http请求库；微信小程序的 javascript 运行环境和浏览器不一样，页面的脚本逻辑 是在JsCore中运行，JsCore是一个没有窗口对象的环境，因此不能在脚本中使用window，也没法在脚本中操做组件，

JsCore中也没有 XmlhttpRequest对象，因此jquery 、zepto、axios这些在小程序中 都不能用，而此时，正是 fly 大显身手的时候。

UI框架：
一、WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
二、mpvue-weui 基于 mpvue 框架，重写 WeUI，基于小程序原生组件，mpvue 完美支持；快捷开发，只需引入 weui.css

赛宜居2.0技术栈：

一、框架：mpvue;

二、UI组件库:mpvue-weui;

三、服务端通信：Fly.js;

项目搭建：

1. 先检查下 Node.js 是否安装成功（如没有须要本身去安装）

   $ node -v

   $ npm -v

2. 全局安装 vue-cli

   $ npm install --global vue-cli

3. 建立一个基于 mpvue-quickstart 模板的新项目 project

   $ vue init mpvue/mpvue-quickstart project

4. 安装依赖

   $ 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)
        }

      }

    });