Flutter 商城实例 购物车
摘要:开始制作购物车部分的内容了。这也算是最复杂的一个部分,也是我们基本掌握Flutter实战技巧的关键,当然我会还是采用UI代码和业务逻辑完全分开的形式,让代码完全解耦。 1、购物车_添加商品 Provide的建立 因为要UI和业务进行分离,所以还是需要先建立一个Provide文件,在lib/provi
阅读全文
posted @
2020-05-29 16:19
JoeYoung
阅读(2346)
推荐(0) 编辑
Flutter 持久化_shared_preferences
摘要:购物车中的一项功能是持久化,就是我们关掉APP,下次进入后,还是可以显示出我们放入购物车的商品。 Flutter提供了三种持久化工具,数据库sqflite、shared_preferences、文件file。 但是这些商品不和后台进行数据交互,前台如果使用sqflite又显得太重,还要懂SQL知识。
阅读全文
posted @
2020-05-28 15:53
JoeYoung
阅读(1355)
推荐(0) 编辑
Flutter 商城实例 详细页
摘要:搭建详细页。会把一个详细页分为6个主要部分来编写,也就是说把一个页面拆成六个大组件,并在不同的页面中。 1详细页_首屏自定义Widget编写 把详细页首屏独立出来,这样业务逻辑更具体,以后也会降低维护成本。最主要的是主UI文件不会变的臃肿不堪。 建立文件和引入资源 在/lib/pages/文件夹下面
阅读全文
posted @
2020-05-26 16:49
JoeYoung
阅读(1611)
推荐(1) 编辑
SWFupload 2.2.x的XSS漏洞及解决方案
摘要:SWFUpload 是一款优秀的 Flash 上传控件,它可以非常好的增强 Web 端程序的用户上传体验。SWFUpload 自由灵活的 JavaScript 接口允许开发者自定义包括 HTML/CSS 在内的几乎所有 UI 样式,被广泛运用在大量站点的上传模块中,如 Youtube 和 WordP
阅读全文
posted @
2020-05-26 10:26
JoeYoung
阅读(1269)
推荐(0) 编辑
Flutter 后台数据接口调试 业务分离
摘要:建立数据模型层,我们的业务逻辑分开,然后进行后台数据的调试。按照真实项目的开发目录接口和文件组织来进行开发。 建立商品详细模型 我们还是用快速生成的方式建立一下商品详细页的接口模型,有这样一段从后端获取的JSON,直接用快速生成的方式,把这段JSON生成模型,然后进行必要的修改。 {"code":"
阅读全文
posted @
2020-05-25 14:19
JoeYoung
阅读(2169)
推荐(0) 编辑
uniapp中自定义组件的封装及使用
摘要:在项目根目录下,创建 components 文件夹,新建文件myinput.vue。 <template name="myinput"> <view> <input class="myinput" type="text" placeholder="请输入信息" value="" /> </view>
阅读全文
posted @
2020-05-22 17:06
JoeYoung
阅读(14943)
推荐(0) 编辑
uni-app 全局变量的几种实现方式
摘要:公用模块 定义一个专用的模块,用来组织和管理这些全局的变量,在需要的页面引入。注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。 示例如下:在 uni-app 项目根目录下创建 common 目录,然后在 common 目录下新建 helper.js 用于定义公
阅读全文
posted @
2020-05-21 15:32
JoeYoung
阅读(5809)
推荐(1) 编辑
uniapp小实例-新闻列表及详情
摘要:首先新建详情info文件夹及info.vue文件,然后在index页写列表部分代码: <template> <view class="content"> <navigator class="newslist" :url="'../info/info?threadid=' + item.threadi
阅读全文
posted @
2020-05-20 15:47
JoeYoung
阅读(4303)
推荐(0) 编辑
uniapp 分享接口
摘要:注意:仅支持分享微信小程序到微信聊天界面,想进入朋友圈需改为分享图片方式,在图片中包含小程序码。一般通过canvas绘制图片,插件市场有很多生成图片的插件。 小程序分享: // 小程序分享 onShareAppMessage() { return { title: 'test', path: 'pa
阅读全文
posted @
2020-05-19 16:38
JoeYoung
阅读(4137)
推荐(0) 编辑
uniapp--第三方登录 小程序登录
摘要:小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。 在manifest.json文件里: 1、微信小程序配置:添加微信小程序的 appID 2、App模块权限配置:勾选上 OAuth登录鉴权 选项 3、App SDK配置:登录鉴权-微信登录-添加app
阅读全文
posted @
2020-05-19 11:03
JoeYoung
阅读(2802)
推荐(0) 编辑
vue h5转换uni-app指南(vue转uni、h5转uni)
摘要:如果你已经有了一个基于vue开发的H5站点,想转换为uni-app。 首先注意2个前提: 1、你的web站是适合手机屏幕的; 2、你的H5代码是全后端分离的,uni-app只处理前端代码。 一切从新建一个uni-app项目开始。然后依次进行 文件处理 把之前的vue web项目的前端代码copy到新
阅读全文
posted @
2020-05-18 15:50
JoeYoung
阅读(5153)
推荐(2) 编辑
uniapp详解及配置
摘要:网络模型的变化 以前网页大多是b/s,服务端代码混合在页面里; 现在是c/s,前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染。 文件类型变化 以前是.html文件,现在是.vue文件 文件内代码架构的变化 以前一个html大节点,里面有s
阅读全文
posted @
2020-05-15 16:22
JoeYoung
阅读(25625)
推荐(3) 编辑
uniapp快速上手
摘要:uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 快速上手: 1. 通过 HBuilderX 可视化界面 可视化的方式比较简单,HBuilderX内置相关环境
阅读全文
posted @
2020-05-14 16:43
JoeYoung
阅读(953)
推荐(0) 编辑
Vuex 的项目实例11 列表数据的按需切换
摘要:如果要实现列表数据的按需切换,就需要用到 getters ,可以将数据源包装,按需来展示,并不会修改数据源。 1、定义 getters getters: { // 列表数据 infoList(state) { if (state.viewKey 'undone') { return state.li
阅读全文
posted @
2020-05-13 10:40
JoeYoung
阅读(329)
推荐(0) 编辑
Vuex 的项目实例10 底部按钮高亮切换
摘要:1、把底部按钮的默认 type 加上 <!--操作按钮--> <a-button-group> <a-button type="primary" >全部</a-button> <a-button type="default" >未完成</a-button> <a-button type="defau
阅读全文
posted @
2020-05-12 11:27
JoeYoung
阅读(545)
推荐(0) 编辑
Vuex 的项目实例9 清除已完成
摘要:点击清除已完成按钮,把列表中的已完成就会被清除,只剩下未完成的任务事项。 1、给“清除已完成”添加点击事件: <!--把已经完成的任务清空--> <a @click="clean">清除已完成</a> <script> export default { methods: { // 清除已完成的任务事
阅读全文
posted @
2020-05-11 16:57
JoeYoung
阅读(472)
推荐(0) 编辑
Vuex 的项目实例8 统计未完成事项
摘要:使用 getters 包装器 1、定义 getters 函数: getters: { // 统计未完成任务的条数 unDoneLength(state) { return state.list.filter(item => item.done false).length } } 2、引入 gette
阅读全文
posted @
2020-05-11 14:09
JoeYoung
阅读(349)
推荐(0) 编辑
Vuex 的项目实例7 修改完成状态
摘要:需求的功能是:点击对应复选框,拿到最新的状态,再根据点击对应项的 id,把最新的状态,赋值到 list 数组中对应的 item 项。 1、给复选框添加点击事件: <!--复选框--> <a-checkbox :checked="item.done" @click="checked(item.id)"
阅读全文
posted @
2020-05-09 15:41
JoeYoung
阅读(433)
推荐(0) 编辑
Vuex 的项目实例6 复选框状态绑定
摘要:1、把 list.json 文件中第一个和第三个数据的 done 改为:true 2、把完成状态和复选框做绑定 复选框是由 checked 属性来指定的。添加属性绑定: <!--复选框--> <a-checkbox :checked="item.done"> {{item.info}} </a-ch
阅读全文
posted @
2020-05-08 14:36
JoeYoung
阅读(352)
推荐(0) 编辑
Vuex 的项目实例5 删除对应事项
摘要:1、给删除按钮添加点击事件: <!--删除链接--> <a slot="actions" @click="delItem(item.id)">删除</a> <script> export default { methods: { // 删除对应事项 delItemById(id) { this.$s
阅读全文
posted @
2020-05-07 17:00
JoeYoung
阅读(500)
推荐(0) 编辑
Vuex 的项目实例4 添加事项
摘要:1、给添加事项按钮增加点击事件: <a-button type="primary" @click="addItemToList">添加事项</a-button> <script> import { mapState } from 'vuex' export default { methods: {
阅读全文
posted @
2020-05-07 11:10
JoeYoung
阅读(310)
推荐(0) 编辑
Vuex 的项目实例3 文本框的双向绑定
摘要:1、在 store/index.js 中定义新的数据 inputValue : state: { list: [], // 所以的任务列表 inputValue: 'aaa' // 文本框的内容 }, 2、回到 Home.vue 做文本框的双向绑定: <a-input placeholder="请输
阅读全文
posted @
2020-05-06 18:23
JoeYoung
阅读(562)
推荐(0) 编辑
Vuex 的项目实例2 动态加载列表数据
摘要:1、在 public 目录下新建 mock 文件夹夹,创建 list.json 文件: [ { "id": 0, "info": "Racing car sprays burnimg fuel into crowd.", "dome": false }, { "id": 1, "info": "Ja
阅读全文
posted @
2020-05-06 11:14
JoeYoung
阅读(1269)
推荐(1) 编辑