mpvue

Android uni-app 封装原生插件

我们两清 提交于 2020-12-20 23:03:06
前言 据广大用户的需求,需要把我们anyRTC的SDK,封装到uni-app来使用,并且实现音视频通话。这边文章图文讲解一下怎么封装原生插件,并且在下一章uni-app实现音视频通话。 anyRTC开发者中心 1.uni-app是什么? 一个使用Vue.js开发所有前端应用框架,开发者编写一套代码,可发布到ios、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 如果你还没有了解uni-app是什么: 点击这里:这篇文章举例说明。 2.uni-app的特点 1、跨平台更多 真正做到“一套代码、多端发行”! 条件编译:优雅的在一个项目里调用不同平台的特色功能! 2、运行体验好 组件、api与微信小程序一致 兼容weex原生渲染 3、通过技术栈,学习成本低 vue的语法、微信小程序的api 内嵌mpvue 4、开放生态,组件更丰富 5、支持通过npm安装第三方包 6、支持微信小程序自定义组件及SDK 7、兼容mpvue组件及项目 8、App端支持和原生混合编码 9、DCloud将发布插件市场 3.uni-app封装原生插件 3.1 Android离线SDK下载: 点击下载 ,两个SDK均可。 下载完成,解压备用: 3.2 新建Android项目 打开Android Studio,建立一个No Activity项目。在菜单栏选择 File>New

校友录小程序开发随笔一:背景与技术方案的选择

╄→尐↘猪︶ㄣ 提交于 2020-12-14 01:12:17
一 业务背景介绍 小女子毕业于湖南长沙某985二梯队大学,在深圳某厂工作,鉴于本校在深圳校友众多(大概4w+), 急切需要一个校友交流的平台,传统的网站形式以及没落且无人问津,故打算开发 一个小程序+公众号的社交平台,供木讷的工科师兄师弟师姐师妹交流,初步计划的模块有资讯,交友,互助,捐赠,个人中心,代言母校,聚会活动,校友供需,后续会陆续来落实。 二 前端技术方案选型 原生 :对性能特别苛刻 or 追求稳定 or 要用最新功能,请记住任何时刻原生都是最稳定性能最好的选择!!!! KBone :kbone 是一个致力于微信小程序和 Web 端同构的解决方案,微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。 MPVue :是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。 WePY :腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征

微信小程序 mpvue + picker

僤鯓⒐⒋嵵緔 提交于 2020-11-24 20:05:55
用mpvue框架和原生的微信小程序有一定差异性,之前在做选择器的时候用原生的方法怎么都不行,最后找到了解决办法。 数据为数组,代码如下: <template> <div class="cost-estimation"> <view class="section"> <picker mode="selector" @change="bindPickerChange" :index="index" :range="array"> <view> 当前选择的国家:{{array[index]}} </view> </picker> </view> </div> </template> <script> export default { data () { return { array: ['中国', '美国', '日本', '韩国'], index: 0 } }, methods: { bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e) this.index = e.mp.detail.value } } } </script> 数据为数组对象,代码如下: <template> <div class="cost-estimation"> <view class="section"> <picker

mpvue小程序开发之 wx.getUserInfo获取用户信息授权

浪子不回头ぞ 提交于 2020-11-24 19:52:57
一、背景 在使用美团的mpvue2.0框架搭建起小程序项目后,做获取用户信息时遇到一些问题:微信小程序更新api后,获取用户信息只能通过button上的绑定方法 来获取用户信息,vue上方法绑定不能直接使用,下面是修改配置mpvue的步骤 vue中代码: <template> <div> <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo">用户授权</button> </div> </template> <script> export default { methods: { bindgetuserinfo: function (e) { console.log(e) } } } </script> <style></style> 配置mpvue中获取用户信息的步骤 1. 进入到node_modules --> mpvue --> index.js,操作index.js文件 2. 操作LIFECYCLE_HOOKS 在 LIFECYCLE_HOOKS 字段中添加'onGetUserInfo' 在initMP(方法里判断 mpType 格式时除 app component 的 else 里添加方法) 实现: 来源: oschina 链接: https://my.oschina.net/u/4399698

大前端-前端高级进阶(已完结)

不打扰是莪最后的温柔 提交于 2020-09-28 07:10:31
下载地址: 百度网盘 阶段一:开启大前端的大门 第1周 认识大前端,开启无限可能 万丈高楼平地起。开课第一周,我们将以轻松幽默的方式,从实际工作中的开发痛点出发,以项目全生命周期为主线,对全栈有全局的认识。从整体项目分析开始,培养您的项目架构思维。 课程安排: 1、了解大前端知识体系,让您有全局的认知 2、理解大前端的定义,让您不再迷茫 3、项目规划及DevOps流程 4、分析实际工作中遇到的痛点以及解决办法 5、掌握需求分析的要点及工具(墨刀/Axure) 6、从原型设计、接口设计到技术栈的宏观项目架构思维 第2周 企业标准的开发环境搭建 工欲善其事,必先利其器。学习最火的Docker容器技术,快速搭建测试环境。深入讲解前端必会的Mock接口与工具,并专门设计了调试技巧&真机调试讲解,与实际工作开发完美契合。 课程安排: 1、虚拟机搭建与使用 2、Linux开发环境及常见命令使用 3、容器技术Docker以及安装及使用 4、Node及npm命令的使用 5、搭建DOClever接口测试平台 6、前后端分离开发--RESTful接口及Mock数据 7、常见IDE使用及VSCode的调试配置及默认设置 8、三类真机调试技巧 第3周 必会的前端工程化工具 效率是检验工程师的重要指标之一,如何提高开发效率,从前端工程化工具着手。本周学习实际工作中两大利器Webpack与Gulp

微信小程序常见的UI框架

若如初见. 提交于 2020-08-18 08:47:55
1.最常见的框架官方框架MINA 地址: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 官方介绍:框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。 2.WeUI 小程序 地址: https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。小程序开发中最常用到的一款框架,受广大开发人员的欢迎。 3.美团小程序框架mpvue 地址: http://mpvue.com/ 官方介绍:mpvue是一个使用 Vue.js开发小程序的前端框架。框架基于 Vue.js核心,mpvue修改了 Vue.js的 runtime和 compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。 4.组件化开发框架wepy 地址: https://wepyjs.github.io/wepy-docs/ 官方介绍:组件化开发,完美解决组件隔离,组件嵌套,组件通信等问题,支持使用第三方 npm 资源,自动处理 npm

大前端已完结

て烟熏妆下的殇ゞ 提交于 2020-08-17 17:53:08
大前端已完结 【超清原画完整无密】 下载地址 【百度云盘】 比前端全栈更上一层 专为实际开发经验1年以上的前端工程师设计 高效全能架构前端 章节目录: 第一阶段 第二阶段 第三阶段 第四阶段 第五阶段 第一阶段:开启大前端之门(1-4周) 第1周 认识大前端,开启无限可能 万丈高楼平地起。开课第一周,我们将以轻松幽默的方式,从实际工作中的开发痛点出发,以项目全生命周期为主线,对全栈有全局的认识。从整体项目分析开始,培养您的项目架构思维。 课程安排: 1. 了解大前端知识体系,让您有全局的认知 2. 理解大前端的定义,让您不再迷茫 3. 项目规划及DevOps流程 4. 分析实际工作中遇到的痛点以及解决办法 5. 掌握需求分析的要点及工具(墨刀/Axure) 6. 从原型设计、接口设计到技术栈的宏观项目架构思维 第2周 企业标准的开发环境搭建 工欲善其事,必先利其器。学习最火的Docker容器技术,快速搭建测试环境。深入讲解前端必会的Mock接口与工具,并专门设计了调试技巧&真机调试讲解,与实际工作开发完美契合。 课程安排: 1. 虚拟机搭建与使用 2. Linux开发环境及常见命令使用 3. 容器技术Docker以及安装及使用 4. Node及npm命令的使用 5. 搭建DOClever接口测试平台 6. 前后端分离开发--RESTful接口及Mock数据 7.

mpvue 封装axios请求方法

ぃ、小莉子 提交于 2020-08-16 19:32:10
参考链接: https://www.jianshu.com/p/71aa01ebe09c 注释:直接使用axios报错,因为微信小程序必须走wx.request发送交易,因此需要使用adapter 一、方法一 request.ts import axios from "axios" ; import qs from "qs" ; import { BaseUrl } from "@/config/index" ; axios.defaults.adapter = function (config) { return new Promise((resolve, reject) => { let data = config.method === "get" ? JSON.parse(config.data) : qs.stringify(config.data); // wx小程序 发起请求相应 log 就可以看到熟悉的返回啦 wx.request({ url: BaseUrl + config.url, method: config.method as any, data: data, success: (res) => { return resolve(res as any); }, fail: (err) => { return reject(err); }, }); }); }