原生小程序学习小结,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;

项目搭建:

  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)看效果:

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

用vcode(自己趁手的编辑器或者IDE)打开 project 中的 src 目录下的代码试试,src中的改动,会实时编译到微信开发者工具中打开文件中,可以看到实时效果(注意:新增的页面需要重新 npm run dev 来进行编译)

mpvue框架构建小程序项目的demo完毕

以后就在src目录下进行赛宜居2.0小程序开发

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

引入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格式,后台能正常接收了

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

贴下登录的密码

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

      }

    });

相关推荐

戴翔的技术 / 0评论 2020-02-03