目录
官网:uni-app官网
uni-app 是一个使用 Vue.js (opens new window) 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台;
uni-app 推荐使用 Hbuilderx 开发工具来开发项目,下载地址:HBuilderX-高效极客技巧或者点击这里下载,下载 App开发版;
1、安装 sass 插件
点击 工具 => 插件安装 => 安装新插件 => 前往插件市场安装 ,在这里你可以搜索自己需要的插件,我们以 sass 为例;找到需要的插件之后点击下载 => 使用Hbuilderx 导入插件,这里需要登录 sass 的网站,如果登录成功则会打开 Hbuilderx 编译器,然后点击确定就可以安装了;
Hbuilderx 点击 文件=>新增=>项目 ,本文新建一个小程序项目:uni-app => 填写项目名称、选择项目存放路径 => 模板 uni-ui 项目=>创建,然后就可以生成一个小程序项目;
components:组件文件
pages:页面文件
static:静态文件
uni_modules:依赖包
App.vue:应用配置,配置小程序全局样式、生命周期
main.js:Vue 初始化入口文件
manifest.json:配置应用名称 appid、logo、版本等打包信息
pages.json:配置页面路径、页面样式、tabBar等信息
uni,scss:全局样式
1、配置 appid
在 manifest.json 文件 => 微信小程序配置 填写微信小程序 appID;
2、在 Hbuilderx 配置微信开发者工具的安装路径:这样可以在 Hbuilderx 里面运行的时候自动打开微信开发者工具查看项目
工具 => 设置 => 运行配置 => 小程序运行配置 配置微信开发者工具的安装路径,如:C:\Program Files (x86)\Tencent\微信web开发者工具
3、在微信开发者工具开启服务端口
设置 => 安全设置 => 安全 开启服务端口
4、运行
Hbuilderx 点击 运行=>运行到小程序模拟器 点击第一个就可以在 Hbuilderx 自动编译,成功之后会自动打开微信开发者工具;
注意:这个时候我们想修改项目里面的内容,需要在 Hbuilderx 里面修改,例如修改配置:manifest.json 文件 => 源码视图
在 pages 下面创建,右键新建页面,这里创建的是 tanBar 对应的几个页面;记住这里要勾选"创建同名目录、在pages.json 中注册"两个选项,默认是选中的;(home、cate、cart、my)
在 pages.json 文件中在 pages 平级新增 tabBar 的配置:
"tabBar":{ "selectedColor":"#C00000", "list":[ { "pagePath":"pages/home/home", "text":"首页", "iconPath":"static/c1.png", "selectedIconPath":"static/c2.png" }, { "pagePath":"pages/cate/cate", "text":"分类", "iconPath":"static/c3.png", "selectedIconPath":"static/c4.png" }, { "pagePath":"pages/cart/cart", "text":"购物车", "iconPath":"static/c5.png", "selectedIconPath":"static/c6.png" }, { "pagePath":"pages/my/my", "text":"我的", "iconPath":"static/c7.png", "selectedIconPath":"static/c8.png" } ] }
注意:home 也必须在 pages 数组的第一位;还可以在 pages.json 文件修改 globalStyle 配置项,来自定义自己的导航条样式;
三、uni-app 里面小程序分包
在根目录下创建分包目录,subpackage;
在 pages 节点同级,声明 subpackages 节点用来配置分包结构;
"subPackages":[ { "root":"subpackage", "pages":[] } ]
在 sunpackage 目录上右键点击新建文件,填写页面名称、选择分包 sunpackage ,然后创建就可以了,编译器会自动在代码中将配置信息填充到 sunpackage 分包下面;
"subPackages":[ { "root":"subpackage", "pages":[{ "path" : "goods_detail/goods_detail", "style" :{ "navigationBarTitleText": "", "enablePullDownRefresh": false } } ] } ]
注意:这里提一下,页面跳转传参跟小程序原生跳转传参是一样的:1、navigator 配合 url 跳转、路径拼接传参;2、点击事件通过 uni.redirectTo ;
这里以 错误提示信息为例,在 main.js 中;
uni.$showMsg = function(titie="请求失败",duration=1000){ uni.showToast({ title, duration, icon:"none" }) }
1、自定义搜索组件:在 components 文件夹右键,选择 新建组件 ,在这里可以编写组件的内容;
2、小程序自定义组件自定义事件:由于小程序提供的组件已经帮助我们封装了 click 事件,所以我们可以直接使用,但是我们自定义的组件没有封装所以不能直接在自定义的组件上使用 click 事件;
我们可以在父组件绑定一个自定义事件,然后子组件绑定 click 事件,在触发 click 的时候通过 $emit 来触发父组件绑定的自定义事件,这样就可以完成自定义组件的事件传递;
3、吸顶:主要是利用 position:sticky ,把组件定位到页面的顶部;
最后使用组件:直接在页面使用就可以了,组件名是自定义组件的文件名称;
//自定义组件 <template> <view class="my-search-container" :style="{'background-color':bgColor}"> <view class="my-search-box" :style="{'border-radius':radius}"> <uni-icons type="search" size="18"></uni-icons> <text class="placeholder">搜索</text> </view> </view> </template> <script> export default { name:"my-search", props:{ bgColor:{ type:String, default:"#c00000" }, radius:{ type:String, default:"18px" } }, methods:{ //通过 $emit 来触发父组件上绑定的自定义事件 searchEvent(){ this.$emit('myclick') } } } </script> <style lang="scss"> .my-search-container{ height: 50px; // background-color: #c00000; display:flex; align-items: center; padding: 0 10px; .my-search-box{ height: 36px; background-color: #FFF; // border-radius: 18px; width: 100%; display: flex; justify-content: center; align-items: center; .placeholder{ font-size: 15px; margin-left: 5px; } } } </style>
//父组件 <template> <view> <view class="suckTop"> <my-search @myclick="goSearch" :radius="'0px'" :bgColor="'pink'"></my-search> </view> </view> </template> <script> export default { methods:{ goSearch(){ uni.navigateTo({ url:"/subpackage/search/search" }) } } } </script> <style lang="scss"> .suckTop{ position: sticky; top: 0; z-index: 999; } </style>
<template> <view> <view class="suckTop"> <uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search-bar> </view> </view> </template> <script> export default { data() { return { timer:null, kw:'' } }, methods: { //输入框事件 input(e){ clearTimeout(this.timer) this.timer = setTimeout(_=>{ this.kw = e.value; },500) }, } } </script> <style lang="scss"> .suckTop{ position: sticky; top: 0; z-index: 999; .uni-searchbar { background-color: #c00000 } } </style>
使用 uni-app 提供的组件,添加 focus 让界面自动锁定输入框, input 事件添加节流,然后就可以在节流方法里面调用接口来获取并渲染搜索出来的结果;
//存 uni.setStorageSync('kw',JSON.stringify(this.kw)); //onLoad 声明周期中 取 let list = JSON.parse(uni.getStorageSync('kw') || ''); //删除 uni.setStorageSync('kw',[]);
跟 data 平级声明 filters
filters:{ toFixed(num){ return Number(num).toFixed(2); } }
使用的时候直接在界面上
<view>{ {num | toFixed}}</view>
在 pages.json 中找到当前页面在 pages 数组中的路径,在 style 中新增 onReachBottomDistance 设置为 150;
在页面中 methods 平级声明一个 onReachBottom 方法来监听页面上拉事件;
data() { return { isLoading:false }; }, methods:{ getList(){ //打开节流阀 this.isLoading = true; //获取数据 let res = ..... //关闭节流阀 this.isLoading = false; } }, //监听上拉事件 onReachBottom() { //没有更多数据 if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('没有更多数据了') //限流 防止频繁请求 if(this.isLoading) return; //页面自增加一 this.pagenum++; //获取列表数据的方法 this.getList(); }
在 pages.json 中找到当前页面在 pages 数组中的路径,在 style 中新增 enablePullDownRefresh设置为 true;
在页面中 methods 平级声明一个 onPullDownRefresh方法来监听页面上拉事件;
methods:{ getList(cb){ //打开节流阀 this.isLoading = true; //调用回调函数 cb && cb(); //获取数据 let res = ..... //关闭节流阀 this.isLoading = false; } }, onPullDownRefresh() { this.total = 0; this.pagenum = 1; this.list = []; this.isLoading = false; //传入回调函数,停止下拉刷新效果 this.getList(()=> uni.stopPullDownRefresh()); }
在调用登录接口之前,我们需要先获取用户的基本信息以及 code,作为参数;
<button open-type="getUserInfo" @getuserinfo="getInfo">一键登录</button> methods:{ //自定义方法 getInfo(e){ console.log(e) } }
这里直接使用 button 组件提供的 open-type 等于 getUserInfo ,并配合 @getuserinfo 事件绑定的方法中获取到用户信息;这里是固定写法;参考官网:button | uni-app官网
这个可以直接调用 uni.login() API ;
async getCode(){ let [err,res] = await uni.login().catch(err=>err) console.log(res) }
只有登录成功之后才能调用支付相关的接口,我们需要将登录后获取的 token 设置在有权限的接口请求字段里;一般在请求拦截里面为接口统一配置 header;
$http.beforeRequest = function (options) { uni.showLoading({ title:"数据加载中..." }) options.header = { Authorization: token } }
1、创建订单
将订单信息提交给后台服务器,创建订单,获取订单号;
2、订单预支付
将订单号发送给后台服务器,获取到支付相关的参数;
3、调用微信支付
调用 uni.requestPayment(OBJECT) API,发起支付请求;通过 fail、 success 回调函数监听支付是否成功,然后调取后台接口将支付状态同步给数据库;
下面是一些比较常见的组件、API、问题:
1、API:uni.previewImage(OBJECT)
预览图片,可以将轮播图方法查看;
2、API:uni.chooseAddress(OBJECT)
获取用户收货地址。调起用户编辑收货地址原生界面,并在编辑完成后返回用户选择的地址,需要用户授权 scope.address;
3、组件:rich-text
渲染富文本;
4、组件:uni-goods-nav
商品加入购物车,立即购买组件;
5、问题:.webp 后缀图片在 ios 不展示问题
ios 上图片 .webp 格式支持不怎么友好,可以只要正则表达式将图片后缀名替换成 .jpg ;
6、问题:商品价格闪烁问题
数据在请求到页面之前, data 里面的数据初始为 {} ,因此初次渲染会导致一些数据闪烁,可以先利用 v-if 判断这个数据是否存在,来控制整体界面的显示隐藏;
7、问题:收获地址授权失败问题
判断是否是授权失败问题,是则直接调用 uni.openSetting(OBJECT) API 开启地址权限;注意兼容 ios 和 安卓;
到此这篇关于微信小程序使用uni-app开发小程序及部分功能实现的文章就介绍到这了,更多相关微信小程序用uni-app开发小程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
文章浏览阅读3.6k次,点赞2次,收藏2次。DELL7080台式机两块硬盘。_没有u盘怎么装ubuntu
文章浏览阅读32次。题面Bessie wants to navigate her spaceship through a dangerous asteroid field in the shape of an N x N grid (1 <= N <= 500). The grid contains K asteroids (1 <= K <= 10,000), which are conv...
文章浏览阅读2.6w次,点赞21次,收藏112次。机器视觉则主要是指工业领域视觉的应用研究,例如自主机器人的视觉,用于检测和测量的视觉系统等。它通过在工业领域将图像感知、图像处理、控制理论与软件、硬件紧密结合,并研究解决图像处理和计算机视觉理论在实际应用过程中的问题,以实现高效的运动控制或各种实时操作。_工业机器视觉系统的构成与开发过程(理论篇—1
文章浏览阅读5.9w次,点赞32次,收藏58次。legend 传奇、图例。plt.legend()的作用:在plt.plot() 定义后plt.legend() 会显示该 label 的内容,否则会报error: No handles with labels found to put in legend.plt.plot(result_price, color = 'red', label = 'Training Loss') legend作用位置:下图红圈处。..._plt.legend
文章浏览阅读2.2k次,点赞3次,收藏11次。深入理解 C# .NET Core 中 async await 异步编程思想引言一、什么是异步?1.1 简单实例(WatchTV并行CookCoffee)二、深入理解(异步)2.1 当我需要异步返回值时,怎么处理?2.2 充分利用异步并行的高效性async await的秘密引言很久没来CSDN了,快小半年了一直在闲置,也写不出一些带有思想和深度的文章;之前就写过一篇关于async await 的异步理解 ,现在回顾,真的不要太浅和太陋,让人不忍直视!好了,废话不再啰嗦,直入主题:一、什么是异步?_netcore async await
文章浏览阅读6.5w次,点赞166次,收藏309次。当我看到别人的类上面的多行注释是是这样的:这样的:这样的:好装X啊!我也想要!怎么办呢?往下瞅:跟着我左手右手一个慢动作~~~File--->Settings---->Editor---->File and Code Templates --->Includes--->File Header:之后点applay--..._idea作者和日期等注释
文章浏览阅读175次。Netperf是一种网络性能的测量工具,主要针对基于TCP或UDP的传输。Netperf根据应用的不同,可以进行不同模式的网络性能测试,即批量数据传输(bulk data transfer)模式和请求/应答(request/reponse)模式。工作原理Netperf工具以client/server方式工作。server端是netserver,用来侦听来自client端的连接,c..._netperf 麒麟
文章浏览阅读1.1k次,点赞2次,收藏3次。作者| qcrao责编 | 屠敏出品 | 程序员宅基地刚开始写这篇文章的时候,目标非常大,想要探索 Go 程序的一生:编码、编译、汇编、链接、运行、退出。它的每一步具体如何进行,力图弄清 Go 程序的这一生。在这个过程中,我又复习了一遍《程序员的自我修养》。这是一本讲编译、链接的书,非常详细,值得一看!数年前,我第一次看到这本书的书名,就非常喜欢。因为它模仿了周星驰喜剧..._go run 每次都要编译吗
文章浏览阅读1.4k次,点赞4次,收藏2次。0、C++的输入输出分为三种:(1)基于控制台的I/O (2)基于文件的I/O (3)基于字符串的I/O 1、头文件[cpp] view plaincopyprint?#include 2、作用istringstream类用于执行C++风格的字符串流的输入操作。 ostringstream类用_c++ istringstream a >> string
文章浏览阅读2k次,点赞3次,收藏14次。我们在每个修改的地方都记录一条对应的 redo 日志显然是不现实的,因此实现方式是用时间换空间,我们在数据库崩了之后用日志还原数据时,在执行这条日志之前,数据库应该是一个一致性状态,我们用对应的参数,执行固定的步骤,修改对应的数据。1,MySQL 就是通过 undolog 回滚日志来保证事务原子性的,在异常发生时,对已经执行的操作进行回滚,回滚日志会先于数据持久化到磁盘上(因为它记录的数据比较少,所以持久化的速度快),当用户再次启动数据库的时候,数据库能够通过查询回滚日志来回滚将之前未完成的事务。_binglog
文章浏览阅读3k次。概述之前介绍过 移动Web开发基础-flex弹性布局(兼容写法) 里面有提到过想做一个Chrome插件,来生成flexbox布局的css代码直接拷贝出来用。最近把这个想法实现了,给大家分享下。play-flexbox插件介绍play-flexbox一秒搞定flexbox布局,可直接预览效果,拷贝CSS代码快速用于页面重构。 你也可以通过点击以下链接(codepen示例)查_chrome css布局插件
文章浏览阅读308次。我自己的配置是GeForce GTX 1660 +CUDA10.0+CUDNN7.6.0 + TensorFlow-GPU 1.14.0Win10系统安装tensorflow-gpu(按照步骤一次成功)https://blog.csdn.net/zqxdsy/article/details/103152190环境配置——win10下TensorFlow-GPU安装(GTX1660 SUPER+CUDA10+CUDNN7.4)https://blog.csdn.net/jiDxiaohuo/arti