最近公司项目在用uni-app做小程序商城,其中商品和个人需要生成图片海报,经过摸索记录后将一些重点记录下来.这里有两种方式来生成 1.后台控制生成 2.前端用canvas合成图片 这里我们只讲使用canvas合成图片的方法,canvas包括绘制文字.图片.图形以及图片显示处理. 一.初始化canvas画布 通过createCanvasContext方法来创建画布 var _this = this; _this.ctx = uni.createCanvasContext('canvasid',

1.uni-app不支持动态组件,目前在用i-if判断,或者用scroll-view切换,没有想到什么其他的办法 2.uni-app不支持具名插槽,会导致页面塌陷 3.uni-app在做动态组件渲染的时候可能会对高度,偏移,定位不友好,但是用px单位就不会有问题,感觉原因是在打包的时候upx单位不会编译成px 4.平常我们再写vue项目的时候会写一个扫描文件,为的就是不用每个组件都去引用那么多组件,但是我在做uni-app的时候浏览器运行是没问题的,但是在安卓手机上并不支持,我打印了一下,确实是

最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现不了,但是我还是回头看了看文档,才发现,这个功能是可以实现的,只需要在pages.json中做一些配置即可 这个在官方称作app-plus,可以自定义导航区域,具体配置如下: "pages": [ { "path": "pages/index/index&qu

uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-app需要安装HBuilder X.下载地址. 下载成功后直接解压即可 简单的配置一下开发偏好:  创建第一个uni-app 点击左上角[文件]>>[新建]>>[项目],选择uni-app模板. uni-app目录结构 目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹: un

根据官方文档进行学习Uni-APP, 再次过程中,记录一些需要熟悉的内容,有不合适的地方,见着都可知道,----我是一个小白,小白,小白 官网地址:https://uniapp.dcloud.io/ 1.在官网中明确指示新建的uni-app所包含的文件代表的意义,熟记这些,能帮助更好的开发应用 2.需要区分两种生命周期 应用生命周期: 只能在app.vue中监听才有效果,4个生命周期 页面生命周期: 官网详解,后期项目过程中,再使用补充

事件表: Web事件 uni-app事件 click tap touchstart touchstart touchmove touchmove touchcancel touchcancel touchend touchend tap tap longtap longtap input input change change submit submit blur blur focus focus reset reset confirm comfirm columnchange columnch

为了节约性能,我们将Class与Style的表达式通过compiler硬编码到uni-app中 支持语法和转换效果如下: Class支持语法: <view :class="{ active: isActive }">111</view> <view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222<

学习任何框架必须将其生命周期了然于胸. uni-app支持如下页面生命周期函数: onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载 onPullDownRefresh 监听用户下拉动作 onReachBottom 页面上拉触底事件的处理函数 onShareAppMessage 用户点击右上角分享  微信小程序 o

我使用的是uni-app插件市场https://ext.dcloud.net.cn/plugin?id=142 出现一闪而过时加入权限 <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES"/> 如图

摘要: 微信小程序开发技巧. 作者:coldsnap 原文:小程序多端框架全面测评 Fundebug经授权转载,版权归原作者所有. 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个? 作为 Taro 开发团队一员,笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣.但宥于利益相关,本文的观点很可能是带有偏向性的,大家可以带着批判的眼光去看待,权当抛砖引玉. 那么,当我们在讨论多端框架时,我们在谈论什么: 多端 笔者以

https://blog.csdn.net/CherryLee_1210/article/details/83016706(copy) 1.首先在uni-app中不支持包下载所以得自己先新建一个项目,然后进入到这个目录下,执行 npm init,接下来一路回车即可.2.下载所需要的库 npm install echarts mpvue-echarts --save13.进入 node_modules 目录,里面的三个目录:echarts.mpvue-echats .zrender 就是我们需要的

结合上文全局登陆校验,实现微信授权登录官方手册地址: https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo 一.书写两个界面 login.vue 用于用户登陆 my.vue 我的界面,存放校验登陆的函数 1.1 my.vue <script>    var loginRes;    export default {        onLoad:function(){            loginRes = this.checkL

https://my.oschina.net/u/2428630/blog/3004860 uni-app框架中 安装(项目根目录下运行) npm install uni-request --save 文件中引用 import uniRequest from 'uni-request'; 使用方法 请求方法的别名 uniRequest.request(config) uniRequest.get(url[, config]) uniRequest.delete(url[, config]) un

今天项目还没有开始开发,网上看到了uni-app官网介绍可以一套代码,多端使用,感觉很厉害的样子,就做了个小程序页面试试. uni-app 使用 vue语法,小程序api,内嵌mpvue,使我们能够很快的上手开发. 先上效果图 一.安装(HBuilderX 和 微信小程序开发工具) 安装完成HBuilderX 后新建uni-app项目 项目目录和我们平时vue项目结构差不多,我们可以在.vue文件来编写我们的页面.        我们在第一次打开小程序时需要注意两点: 1.配置小程序路径:运行-

仿h5+fire自定义事件触发监听 uni-app调用 event.js 源码记录(点击查看) 1.js下载地址 [event.js](https://ext.dcloud.net.cn/plugin?id=333) [源码记录](https://github.com/wojiaoxiaomayun/jsUtil/tree/master/event) 2.js文件直接拖入 3.import event from 'common/event.js' 4.Vue.prototype.event =

本文讲解  uni-app如何调用支付宝进行支付,服务端为 .net编写. 客户端:uni-app 编写  1.根据服务端生成的订单信息发起支付. 服务端:.net 编写 1.生成订单信息.2.接收支付宝异步反馈支付信息. 先说重点  uni-app 不支持支付宝沙箱测试!不支持支付宝沙箱测试!!不支持支付宝沙箱测试!!!(重要的事情说三遍,为此我浪费了半天.上线应用没签约支付又浪费了半天). 客户端很简单 一句代码搞定:  参考官方文档:https://uniapp.dcloud.io/api

使用uni-app的时候,因为想用flex布局,所以一开始就设置了全部view display为flex. 之后遇到了如下这种样式: 开始想了半天没想出来,后来想到div span有这个效果. 然后就有了两种方法: 1.使用uni-app的 rich-text 然后节点使用div span 拼一个字符串出来. <div><span>这里是标题这里是标题这里是标题这里是标题</span> <span class="label">标签<

使用 uni-app 做项目时需要用到 iconfont.和 web 使用略有差别.谨以此记录. 因为 uni-app 不能使用本地字体图标库,所以不能直接下载使用. 1.将iconfont中需要的图标,加入购物车,然后放到项目.生成在线代码,稍后用. 2.下载项目至本地.然后解压取出 iconfont.css 文件. 3.将 1 中的在线代码 copy 替换掉 iconfont.css 中的 @font-face.并且加上前缀 https: .完成后如下: 这样就是引用的 阿里巴巴的 在线图标

1 路由的跳转 uni.navigateTo({ url:'/pages/home/search' }); //非tabBar页面跳转 uni.switchTab({ url:"/pages/index/index" }) //非tabBar跳转到tabBar页面 2 请求 uni.request({ url: 'https://www.easy-mock.com/mock/5cb6c0b0af031b75d25dc1f5/element/historyComtent', //接口地址

安装: 直接到官网安装. 到插件市场下载一个模版. 新建项目的时候有提示链接: 找一个模版用于测试,或者在创建的时候选一个内置模版. 运行:第一次运行的时候有几个地方需要配置,这里因为只是用到了微信小程序和移动端app,其他请自行参考官网 一.编译运行微信小程序: 1.配置按照路径:工具-配置 2.新建项目.选择模版 3.运行编译:左侧项目目录要选中uni-app 的项目,点击菜单栏里的运行-运行到小程序模拟器 注意:需要在微信小程序开放工具里开启服务端口 二.运行到浏览器:H5版本 运行-运行

1.获取上个页面 var pages = getCurrentPages();//当前页 var beforePage = pages[pages.length - 2];//上个页面 2.在当前页调上个页面方法 beforePage.submitAct() 但是,在uni-app中是适配多端的,beforePage.submitAct()只在h5中有效,在app端和微信小程序端都会报错 not a function: 在h5和app中实现当前页调上个页面方法 beforePage.$vm.su