原生小程序学习小结,mpvue+mpvue-weui+fyl.js小程序项目搭建笔记
官方文档: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)}}});
原生小程序学习小结,mpvue+mpvue-weui+fyl.js小程序项目搭建笔记相关推荐
- 微信小程序学习:(二)app.js及index.js详解
微信小程序学习:(二)app.js及index.js详解 项目地址:https://github.com/leoricding/- 在用ide创建小程序项目时,系统默认为我们创建了一个hellowor ...
- 小程序学习历程(二):注册小程序测试号
该文适合还没有微信小程序开发者账号,以及有了开发者账号同时还想注册一个测试账号的读者. 开发者测试账号推出的用意,主要是:方便我们在决定正式注册小程序账号之前,或者仅仅只是想体验一下小程序(或小游戏 ...
- mpvue 微信小程序_使用Vue.js开发微信小程序:开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- h5+js调取相机做取景框_使用Vue.js开发微信小程序:开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 使用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发 ...
- 一周小程序学习 第1天
2019独角兽企业重金招聘Python工程师标准>>> 一周小程序学习 第1天 今日正式开始小程序的学习! 对于刚上手的自学小白,技术选型是很重要的,这在一开始就决定了这条开发学习之 ...
- 微信小程序学习(2)-云开发
微信小程序-云开发 微信小程序学习(1) 微信小程序学习(2) 文章目录 微信小程序-云开发 初始化+云函数的坑 云函数使用 老陈段子 小程序云存储 小程序云数据库 初始化插入 简单查询 更新数据 删 ...
- 原生开发小程序 和 wepy 、 mpvue 对比
原生开发小程序 和 wepy . mpvue 对比 本文横向对比.探讨了下原生开发小程序,和目前比较热门的 wepy .mpvue 开发小程序三种方式的优势和劣势:由于三者的篇幅都比较多,本文只是简单 ...
最新文章
- Pyhon 图片透明化
- 循环遍历Java字符串字符的规范方法——类似python for ch in string
- dllinject使用
- Codeforces Round #587 (Div. 3)
- stm32f103c8t6移植uCOS Ⅲ出现Error: L6407W,解决方法:内核配置以减小代码规模
- 红色警戒2修改器原理百科(十)
- python 忽略 异常_如何忽略Python中的异常?
- 前端学习(1947)vue之电商管理系统电商系统之使用自定义模板渲染
- 安装quartus时弹出错误_Win10 安装arcgis10.2 for desktop需要.net framework 解决方案
- bzoj 2733: [HNOI2012]永无乡(线段树启发式合并)
- Web应用开发基本技术及思想
- WCF服务启动时遇到AddressAccessDeniedException
- 【安全资讯】引爆点:过去2020年勒索软件攻击激增62%
- sqlite可视化工具sqliteman的问题
- 怎样使用Fiddler工具进行APP抓包
- 【翻译服务(1)】有道智云使用入门及文本、图片和语音翻译服务
- 此操作系统不支持.netframework4.7.1
- 人生之路1.20代码 第三部分
- 云服务器哪家好?云服务器评测对比
- php去除头尾空格,php去除头尾空格的2种方法,php头尾空格2种_PHP教程
热门文章
- matlab对图像进行线性点运算,图像线性点运算---MATLAB
- Lui-简洁、面向vlog博客、专注视频领域的主题
- CBC翻转攻击与实验吧CTF例题:简单的登录题
- 图像目标检索:基于Opencv的颜色空间匹配法
- MATLAB算法实战应用案例精讲-【自动驾驶】自动驾驶中的自动泊车功能(最终篇)
- Python基于OpenCV&ORB和特征匹配的双视频图像拼接(源码&部署教程)
- 如何利用人工智能提高医疗保健资源利用效率
- 20145231《Java程序设计》第五次实验报告
- 解决 Python打包成exe 文件过大问题的一些方法
- 解决android中View.performClick()触发无反映