mpvue微信小程序动画_mpvue微信小程序系列
项目空闲时间,来做一波温故知新。
当前时期的需求是做一个拼团的小程序。
在这之前在做一个微信公众号H5项目,技术栈是Vue全家桶(vue+router+vuex+vant...)。在新的小程序项目中有很多组件类似于之前项目的组件,所以决定使用mpvue作为基础来搭建项目。
mpvue框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。
简而言之,就是可以用类似vue的语法来开发小程序,通过mpvue配置好的各种loader来将vue文件转换为小程序需要的wxml,wxss等
站在巨人的肩膀上,别人的分享为我提供了很多的方便。下面介绍项目的第一步,搭建环境。
从第一步搭建环境开始记录。建议使用cnpm,开发过程中会需要填写appid等信息,不过要是练手的话也可以不用填
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
上面流程走完,项目中会多出一个dist文件夹,这就是生成的微信小程序项目。OK,然后打开微信开发者工具,选择小程序----体验模式(没有appid时),将项目目录指向刚刚生成的dist文件夹。好了,页面出来了。
这就完了?
当然
没有
需要知道的地方:
1.最重要的当然是看文档,mpvue的文档相当的简单,是我辈开发者的最爱。
2.自己的代码在/src里面,每个页面一个文件夹,包含这三个文件
image.png
index.vue 这是页面主页文件,完全和vue的语法相同,可以放心食用
main.js 这个是将vue实例化的一个文件,建议不要修改,即每个页面文件夹都是这样
image.png
main.json 看过小程序文档的都知道,这个文件可以用来配置小程序顶部tab的标题和颜色之类的东西
image.png
3.在/build/utils.js文件夹里,有一堆配置,初学者可以不用管它三七二十一的。不过需要修改一下px2rpxLoader的属性,这里的意思是将css代码中的px转换成小程序的rpx(小程序标配的尺寸,自适应效果很好)原本基础配置是2比1,意思是将2px转换成1rpx。我们将它改成1比1,这样就可以直接按照标注图上的px单位来敲代码了。
var px2rpxLoader = {
loader: 'px2rpx-loader',
options: {
baseDpr: 1,
rpxUnit: 1
}
}
4.配置环境变量
为了统一并且方便,我们通常都会配置一个环境变量来保持dev和product的代码统一。
/config/dev.env.jsdev版本
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
//服务器域名,这里展示测试服的服务器地址
API_ROOT:'"http://beta.baidu.com"'
})
/config/prod.env.jsproduct版本
module.exports = {
NODE_ENV: '"production"',
// 服务器域名
API_ROOT:'"http://baidu.com"'
}
取值:这样就能在代码一致的情况下,配置不同的地址(其他更多不同的地方)。
const url = process.env.API_ROOT;
我所使用到的环境搭建以及基本配置就已经完成了。
mpvue项目中需要注意的点
获取服务端数据需要在mounted中请求
尽量不使用小程序的生命周期,主要使用vue的生命周期
一些常用的API
在这个项目中没有使用到vuex,我们使用小程序原生的方法储存数据
微信小程序详细API看这里,我只总结一些常用的方法
// 同步储存数据
wx.setStorageSync('phone', 18244242739);
// 普通跳转页面
wx.navigateTo({
url: 'test?id=1'
})
// 重定向,在路由栈中删除当前页面
!!!微信页面栈最多5层,遵循栈的先进后出,只是这里超出5层就删除第一层
wx.redirectTo({
url: 'test?id=1'
})
// 取缓存中的值
const value = wx.getStorageSync('key值')
// 微信小程序登陆
wx.login({
success(res){
// 登陆成功的回调
}
})
// 获取当前页面的地址(url后的参数)
function getCurrentPageUrl(){
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length-1] //获取当前页面的对象
// url后的参数:url.options.参数名
var url = currentPage.route //当前页面url
return url
}
选择图片并上传
// 上传
wx.chooseImage({
count: 4, // 可以同时选择多少张
sourceType: ["album", "camera"], // 图片来源:相册选图 相机拍照
sizeType: ["original", "compressed"], // 图片质量:原图 压缩图
success(res) {
// res为选取的图片数据
// 上传多张
for (let i = 0; i < res.tempFilePaths.length; i++) {
uploadImg(res, i);
}
}
});
// 上传到自己的服务器上
function uploadImg(res, index) {
// 验证文件大小
if (res.tempFiles[index].size > 3 * 1024 * 1024) {
this.$tip("图片大小不能超过3M");
return;
}
wx.uploadFile({
url: "自己服务器的接口地址",
// 获取文件
filePath: res.tempFilePaths[index],
// 字段名
name: "image",
//wx此方法的content-type默认为multipart/form-data
header: {
"user-token": "xxxxxxxxxx",
},
success(resData) {
// 成功的回调
// ......
}
});
}
真机调试和预览
image.png
代码完工之后的发布流程
image.png
1.在微信小程序管理中心配置你的微信号为主要开发者后,这里会出现一个上传按钮,点击上传就好
2.管理中心点击确定发布
3.等待审核(第一次2-3天,然后等待时间可能比较长了...)
4.审核通过,完成上线。
mpvue微信小程序动画_mpvue微信小程序系列相关推荐
- mpvue微信小程序动画_mpvue小程序以及微信直播踩坑总结
前段时间刚写完一个mpvue的小程序,现在得闲必须赶紧记录和总结一下,不然很多东西又要忘了 我是比较熟悉vue的语法,但是也犹豫过是用原生还是用mpvue,因为那时候原生小程序已经相当成熟而mpvue ...
- mpvue还在维护吗_mpvue 微信小程序开发之生命周期
最近在开发小程序,尝试性地使用了一下 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compile ...
- mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍 项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱 字母简谱 数字简谱对字母简谱 后期看情况更新追加其他训练. 产品展示 扫描下方小程序 ...
- mpvue微信小程序动画_微信小程序框架之mpvue(入门教程)
本文章主要用于接触一段时间的微信小程序的开发者或者开发团队,当然,今天主要给大家分享一下,近期研究的mpvue,属于美团小程序框架,本期主要做基础的安装及配置说明,好了,我们首先还是简单了解一下mpv ...
- mpvue微信小程序动画_微信小程序MPvue实现动画效果
export default { data() { return { animation1: {}, animation2: {}, animation3: {}, stretch: false, / ...
- 小插件 打开Android程序动画,android-单击小部件后如何启动活动?
这就是对我有用的- onUpdate方法代码应为: @Override public void onUpdate(Context context, AppWidgetManager appWidget ...
- 微信小程序动画解析以及transitionend重复 animationiteration animationend失效问题解析
github项目代码 github项目代码 https://github.com/MrITzhongzi/small_routine_components/tree/master/5.danmu_co ...
- 基于mpvue框架的仿酷狗音乐小程序开发的微信小程序(Robot Music)
1. 项目实现 由于是小程序未认证所以只能添加体验者才能预览 项目github地址:https://github.com/historytiger/wx- 请下载放开发者工具食用 数据来源于网络大佬免 ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
最新文章
- 设置在本文件里查找_Win 10 自带聚焦搜索?这么设置轻松查找电脑文件
- linux文本分析工具awk解读
- IDEA启动项目:找不到或无法加载主类
- 加载数据时,页面显示正在加载的动画,支持移动端
- 果断Mark!Searchcode——源代码搜索利器
- POJ--1300--Door Man【推断无向图欧拉通路】
- 二叉搜索树第k小元素
- Android指定SDK编译版本
- java代码绩点计算器_怎么用java写一个gpa计算器?
- jmeter压力测试的辅助插件和实操技巧
- KMS服务器安装以及配置
- 时钟芯片RX8025T的电源设计
- 力扣5713. 字符串中不同整数的数目
- 计算机科学家 本科专业,纽芬兰纪念大学计算机科学本科专业介绍及课程设置...
- 【Mysql笔试】-常见笔试题汇总
- stm32c8t6运行freertos
- 炸金花游戏(1)--炸金花游戏的模型设计和牌力评估
- 使用CLIP构建视频搜索引擎
- 梅州放射性实验室建设布局要求分析
- e盘服务器被禁用怎么修改,ecs云服务器e盘改d盘
热门文章
- 大部分人都会忽略的Python易错点总结
- php输出字符unicode码,[PHP]单字符Unicode编码解码函数
- pycharm 提示 ennble Code compatibility inspection(代码兼容性检查)
- python 将PascalVOC(XML)格式的标注数据批量转换为YOLO(txt)格式的标注数据
- python sklearn.decomposition.PCA 主成分分析, 原理详解
- Python根据原图解析拍摄地点
- Ubuntu16.04安装CUDA8.0时,提示:The driver installation is unable to locate the kernel source.
- AcWing算法提高课 Level-3 第三章 图论
- @order注解_Spring Boot+OAuth2,一个注解搞定单点登录!
- 提升的控件 paint()事件被遮挡_设计锦囊 | 提升产品易用性案例分享