iis网站在点默认文档的时候报错.,唐山论坛建站模板,重庆建设造价信息网站,抖音小程序在哪里uniapp Vue的原型链生命周期函数onLoaduni.chooseLocationgetCurrentPages美团外卖微信小程序开发uniapp-美团外卖微信小程序开发P1 成果展示P2外卖小程序后端#xff0c;学习给小程序写http接口P3 主界面配置P4 首页组件拆分P13 外卖列表布局筛选组件商家 布局测试数据创建样… uniapp Vue的原型链生命周期函数onLoaduni.chooseLocationgetCurrentPages美团外卖微信小程序开发uniapp-美团外卖微信小程序开发P1 成果展示P2外卖小程序后端学习给小程序写http接口P3 主界面配置P4 首页组件拆分P13 外卖列表布局筛选组件商家 布局测试数据创建样式 请求商家外卖数据封装请求并发请求 工作 android jsbridge H5uniapp打包 Hyprid App解决跨域问题开发中常识性 跨域 原理 知识点部署 index页商品列表 与 数据渲染页面请求 后台数据 至前台后台地址 用户定位-精确推荐方案商品搜索请求接口uniapp简介完成安卓打包uniapp实战——完成小程序打包发布uniapp实战——利用uni-ui实现底部导航区域渗透测试-微信小程序-公众号测试经验总结微信公众号H5端微信小程序——Flex布局flex 布局 属性flex -wrap 换行justify -content 对齐方式 块成员 元素 微信小程序——小程序UI框架首页商城首页测试数据 微信小程序——自定义tabbar样式微信小程序——拖拽定位微信小程序——登陆界面与逻辑微信小程序——开源-商城 首页学习分析微信小程序——开源-知乎日报客户端源码学习//splash 分析生命周期 老版本 授权弹框 的问题 需要解决设计 流程先分析产品需求 -- UI设计 --架构选型设计分析--- 框架搭建--前端服务实现设计 -- 后端服务实现开发--内网测试--- 可运维架构部署测试 --- git优化改良测试-- 分布式容器云部署 微信小程序——小程序/公众号/H5支付PHP微信小程序联调——用户信息授权微信小程序——表白墙 前台 开发整理wx.navigateTo(Object object)app.js index.jsrelease 发布 微信小程序——常用组件组件视图组件scroll-view 组件 可滚动视图 横向滑动swiper 轮播图 组件可缩放viewform表单 微信小程序——同异步数据传输#2019.12.5#本地缓存 前提#传参# JAVA实战——微信小程序登录后台添加相关依赖 添加配置文件新建javaBeanWeChatUserInfo.java新建WeChatOpenLoginController.java实现微信开放平台第三方登录的主要逻辑。 微信小程序——ColorUI快速开发首页手记首页custom 顶部搜索框 Vue的原型链
Vue.prototype.$location
生命周期函数onLoad
scriptexport default {data(){},components: { },/*** 生命周期函数--监听页面加载*/onLoad() {},/*** 生命周期函数--监听页面显示*/onShow() {} ,methods:{ }}
/scriptuni.chooseLocation
getCurrentPages
getCurrentPages() 方法获取到当前页面栈的所有页面
而 pages[pages.length - 2] 表示当前页面栈中的倒数第二个页面也就是其上一个页面的页面对象。 通过这个方法我们可以在当前页面中调用上一个页面的方法、获取其数据等操作。
美团外卖微信小程序开发
uni-app框架调用https接口 开发小程序 提高vue技术 前端技术 课程需要具备vue基础知识
uniapp-美团外卖微信小程序开发
P1 成果展示 nodejs 后台
P2外卖小程序后端学习给小程序写http接口 P3 主界面配置
uniapp 小程序 vue 新建界面 添加配置 资源文件 底部导航栏
拾色器
P4 首页组件拆分
P13 外卖列表布局
筛选组件 发生事件穿透
商家 布局 引进子组件 import Take from ./components/takeout.vueexport default {components:{Take},templateviewblock v-for(item,index) in shoperlist :keyindexview classcontent-viewview classcontent_imgimage :srcitem.logo modeaspectFill/image/viewview classcontent_titletext classcontent_shoper{{item.shoper}}/textview classcontent_resulttext月销售{{1}}/texttext距您约{{item.duration}}分钟/text/viewview classcontent_end image src/imagetext{{item.types}}/text/view/view/view/block/view
/template测试数据
写死数据 数组对象 https://www.bilibili.com/video/BV1Zt4y117RR?p13vd_sourcef21773b7086456ae21a58a6cc59023be
scriptexport default {data() {return {shoperlist: [{logo: https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fqny.smzdm.com%2F202205%2F23%2F628b811626a976429.jpg_d250.jpgreferhttp%3A%2F%2Fqny.smzdm.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1668590466t06731bdad94505329d8a942c1e08e66b,shoper: 啦啦啦,duration: 30,types: 大傻逼} ]}},}
/script创建样式 .content-view text{display: block;}
.content-view{display: flex;
justify-content: space-between;
height: 200upx !important;
overflow: hidden;
border-bottom: 1rpx solid #E4E8EB;
padding-bottom: 5upx;
margin: 30upx 0;
color: #898989;}.content_img{width: 350upx !important;height: 200upx !important;
}.content_img image{width: 100%;height: 100%;border-radius: 10upx;
}.content_title{width: 100%;padding-left: 10upx;font-size: 24upx;
}.content_shoper{color: #333333;height: 50upx;font-size: 33upx;font-weight: bold;line-height: 50upx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;
}.content_result{display: flex;justify-content: space-between;height: 50upx;line-height: 50upx;
}.content_end{display: flex;align-items: center;height: 50upx;line-height: 50upx;
}.content_end text {width: 130upx;}
.content_end image {width: 24upx; height: 24upx;
padding-right: 10upx;}
style scopedimport ../../../common/css/take.css
/style请求商家外卖数据 封装请求 父页面引入
并发请求
同时并发请求 多个接口同时得到 多个接口数据 object 对象 工作 android jsbridge H5uniapp打包 Hyprid App解决跨域问题
开发中
如果 你用 Hbuilder 自带的 内置 浏览器 自带 解决了 跨域问题
可以 正常 调试 、、、
但是 无法 从 android 那边 安卓webview 打开 调试 所以 还是 得 加 跨域 代理
常识性 跨域 原理 知识点
需要软件开发 联系我哦 一、为什么会出现跨域问题
出于浏览器的同源策略限制。同源策略Sameoriginpolicy是一种约定
它是浏览器最核心也最基本的安全功能如果缺少了同源策略则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的浏览器只是针对同源策略的一种实现。
同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。
所谓同源即指在同一个域就是两个页面具有相同的协议protocol主机host和端口号port 什么是跨域
当一个 浏览器 请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域当前页面url 被请求页面url 是否跨域 原因
http://www.test.com/ http://www.test.com/index.html 否 同源协议、域名、端口号相同
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同http/https
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同test/baidu
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同www/blog
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同8080/7001 官方定义
OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。
通过这个方法客户端可以在采取具体资源请求之前决定对该资源采取何种必要措施或者了解服务器的性能。出于安全考虑并不是所有域名都可以访问后端服务。
在正式跨域之前浏览器会根据需要发起一次预检也就是 OPTIONS 请求
用来让服务端返回允许的方法如get、post
允许被跨域访问的Origin来源或者域还有是否需要Credentials(认证信息)等。浏览器将 CORS 分为两类
简单请求 不会进行预检对于简单请求浏览器直接请求会在请求头信息中增加一个origin字段
来说明本次请求来自哪个源协议域名端口
同时满足下列三大条件就属于简单请求否则属于非简单请求1.请求方式只能是GET、POST、HEAD
2.HTTP请求头限制这几种字段
Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
3.Content-type取application/x-www-form-urlencoded、multipart/form-data、text/plain 所以 说一下 解决方案
第一种在项目根目录下即跟App.vue同级建vue.config.js这个文件会默认优先加载
这个 是 测试 时候 用的 仅供参考
格式
module.exports {devServer:{port:8080,disableHostCheck:true,proxy:{/dpc:{target:http://XXXXX:9088,changeOrigin:true,pathRewrite:{^/dpc: }}}}
}第二种在manifest.json的代码视图中 根节点中(即{}中)做如下声明 h5: {devServer: {port: 8080, //浏览器运行端口disableHostCheck: true,proxy: {/dpc: {target: XXXXXX:9088, //实际请求服务器地址changeOrigin: true,secure: true,pathRewrite: {^/dpc: }}}}}封装的 请求 示例 var BASE_URL http:XXXXXX:9088; //不是h5默认这个地址
// #ifdef H5
BASE_URL /dpc; //H5下将地址修改为/dpc
// #endif//附上网络请求的封装
export default (options){uni.showLoading({title:加载中...})return new Promise((resolve,reject) {uni.request({url:BASE_URL options.url,method:options.method || GET,data:options.data || {},success(res) {if(res){resolve(res.data)}},fail(err) {reject(err)},complete() {uni.hideLoading()}})})
}可以直接搬
如果你要配置要网站多个子目录需要配置一些参数 例如你的网站域名是https://testapi.kemiandan.com然而你想配置在https://testapi.kemiandan.com/h5/h5目录下 找到manifest.json文件打开源码视图新增 h5 : {router : {mode : history,base : /h5/h5/ // 配置引用的正确的文件路径},domain : https://testapi.kemiandan.com/h5/h5}然后把打包后的文件放在可访问/h5/h5目录下 访问路径 https://testapi.kemiandan.com/h5/h5/即可访问
从中 想到 把 跨域 配置 去掉
安卓端 跟 浏览器端 差不多 就是 发个 OPTIONS 请求 跨域 验证 到 后端 然后 你就可以 用 你的 浏览器安卓端 去访问 它请求 你的 源代码 浏览器 进行 解析 包括 向 你的 服务接口 发请求 数据 回传 渲染到 页面 这是 用 浏览器 打开 安卓同理 - 服务器端接收请求 返回 这样一个 跨域代理 就解决了
部署 devServe是开发时候用的正式环境不走这里 如果 你 还用 devserve 你会发现 请求 就跑nginx 前端服务器 去了 你的 proxy 没起作用 所以 发布时候 就得 在 nginx 服务器 和 后端接口方面 入手 先 确保 打包后 的 h5 能正常访问 并 发请求 给 后端 供参考 这个 是 测试的 django 后端 接口 1474
android 的 webview 发送 校验options 到 后端 POST 请求 失败 剩下 的事 就 交给 后端 和 运维的 处理 吧前端的 问题 结束 options在此问题中属于第二种当涉及到跨域时并且是post请求时 本地服务器会先发送一个options请求到服务器如果服务器认为options请求时无危险性且认可的 那么在允许本地服务器发送post请求 但是如果后端认为options请求是危险且不成功的那么会直接阻止本地服务器发送其他请求
叫 后端 大哥 拿 Authorization中的token或者将所有options放行此时便能通过post请求访问到数据 index页商品列表 与 数据渲染
页面请求 后台数据 至前台
后台地址 请求三个值页面识别idtokenEg示例返回结果 {code: 1,msg: success,data: {items: {s10001: {id: s10001,type: search,params: {placeholder: 搜索商品},style: {textAlign: center,searchStyle: radius}},n606196612728596: {id: n606196612728596,type: banner,style: {btnColor: #ffffff,btnShape: round},data: {n400199453786769: {imgUrl: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521e41cf3986.jpg,imgName: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521e41cf3986.jpg,linkUrl: page/index/index},n837367626101537: {imgUrl: http://127.0.0.1/www.cnthink.net/shop/web/uploads/202012161015204bd302747.jpg,imgName: http://127.0.0.1/www.cnthink.net/shop/web/uploads/202012161015204bd302747.jpg,linkUrl: page/index/index},n39296042711415: {dataId: n39296042711415,imgUrl: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521eec407132.jpg,imgName: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521eec407132.jpg,linkUrl: page/index/index},n253302235811058: {dataId: n253302235811058,imgUrl: http://127.0.0.1/www.cnthink.net/shop/web/uploads/202012161015214ae427082.jpg,imgName: http://127.0.0.1/www.cnthink.net/shop/web/uploads/202012161015214ae427082.jpg,linkUrl: page/index/index},n894849566788663: {dataId: n894849566788663,imgUrl: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521f14513173.jpg,imgName: http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201216101521f14513173.jpg,linkUrl: page/index/index}}}},newest: [{goods_id: 3,goods_name: 外星人,category_id: 10003,spec_type: 10,deduct_stock_type: 20,content: p1111/p,goods_sort: 100,delivery_id: 10003,goods_status: {text: 上架,value: 10},spec: [{goods_spec_id: 5,goods_id: 3,goods_no: 20201226,goods_price: 111.00,line_price: 1111.00,stock_num: 11,goods_sales: 0,goods_weight: 111,spec_sku_id: }],category: {category_id: 10003,name: 电脑,parent_id: 0,image_id: 10014,sort: 1,create_time: 2020-12-26 13:47:14},image: [{id: 12,goods_id: 3,image_id: 10016,file_path: http://192.168.0.100/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png,file_name: 2020122613485531f529442.png,file_url: }],goods_sales: 0},{goods_id: 2,goods_name: 外星人,category_id: 10003,spec_type: 10,deduct_stock_type: 20,content: pimg src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201226134850d97b07122.png\ _src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201226134850d97b07122.png\ style\\//ppimg src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png\ _src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png\ style\\//ppbr//p,goods_sort: 1,delivery_id: 10003,goods_status: {text: 上架,value: 10},spec: [{goods_spec_id: 4,goods_id: 2,goods_no: 20201226,goods_price: 50000.00,line_price: 40000.00,stock_num: 10000,goods_sales: 0,goods_weight: 36,spec_sku_id: }],category: {category_id: 10003,name: 电脑,parent_id: 0,image_id: 10014,sort: 1,create_time: 2020-12-26 13:47:14},image: [{id: 11,goods_id: 2,image_id: 10013,file_path: http://192.168.0.100/www.cnthink.net/shop/web/uploads/20201226134619131288787.png,file_name: 20201226134619131288787.png,file_url: }],goods_sales: 0}],best: [{goods_id: 2,goods_name: 外星人,category_id: 10003,spec_type: 10,deduct_stock_type: 20,content: pimg src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201226134850d97b07122.png\ _src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/20201226134850d97b07122.png\ style\\//ppimg src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png\ _src\http://127.0.0.1/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png\ style\\//ppbr//p,goods_sort: 1,delivery_id: 10003,goods_status: {text: 上架,value: 10},spec: [{goods_spec_id: 4,goods_id: 2,goods_no: 20201226,goods_price: 50000.00,line_price: 40000.00,stock_num: 10000,goods_sales: 0,goods_weight: 36,spec_sku_id: }],category: {category_id: 10003,name: 电脑,parent_id: 0,image_id: 10014,sort: 1,create_time: 2020-12-26 13:47:14},image: [{id: 11,goods_id: 2,image_id: 10013,file_path: http://192.168.0.100/www.cnthink.net/shop/web/uploads/20201226134619131288787.png,file_name: 20201226134619131288787.png,file_url: }],goods_sales: 0},{goods_id: 3,goods_name: 外星人,category_id: 10003,spec_type: 10,deduct_stock_type: 20,content: p1111/p,goods_sort: 100,delivery_id: 10003,goods_status: {text: 上架,value: 10},spec: [{goods_spec_id: 5,goods_id: 3,goods_no: 20201226,goods_price: 111.00,line_price: 1111.00,stock_num: 11,goods_sales: 0,goods_weight: 111,spec_sku_id: }],category: {category_id: 10003,name: 电脑,parent_id: 0,image_id: 10014,sort: 1,create_time: 2020-12-26 13:47:14},image: [{id: 12,goods_id: 3,image_id: 10016,file_path: http://192.168.0.100/www.cnthink.net/shop/web/uploads/2020122613485531f529442.png,file_name: 2020122613485531f529442.png,file_url: }],goods_sales: 0}]}
}block v-ifitem.type banner用户定位-精确推荐方案 商品搜索请求接口 uniapp简介 完成安卓打包 uniapp实战——完成小程序打包发布 uniapp实战——利用uni-ui实现底部导航区域 渗透测试-微信小程序-公众号测试经验总结
微信公众号H5端 限制手段及绕过方法 1、未做限制 使用其他浏览器可直接打开页面进行浏览 2、通过 UserAgent 来限制 现象使用其他浏览器打开后会跳转到其他页面 或者 有弹窗提示但是不会跳到open.weixin.qq.com域名去。 处理方法直接模拟UA访问chrome内置了这个功能。 如下为微信UA一般情况下这两个作用一样实际上哪怕UA里只填一个MicroMessenger都是可以绕过去的 安卓微信UA
Mozilla/5.0 (Linux; U; Android 4.1.2; zh-cn; Chitanda/Akari) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MicroMessenger/6.0.0.58_r884092.501 NetType/WIFI
03emulate-UA.jpgios微信UA
Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12A365 MicroMessenger/5.4.1 NetType/WIFI3、利用了微信oauth做限制 有些对用户身份验证要求比较高的页面则会利用微信的OAUTH来拉取openid做验证这种就不仅仅是改UA这么容易绕过去了。好在也不是无解因为身份验证信息一般都是存在Cookies里的所以我们可以直接模拟Cookies来让服务器误以为我们是在微信内做的请求。 现象使用其他浏览器打开后会跳转到open.weixin.qq.com域名且页面提示请在微信客户端打开链接。 处理方法 a、将浏览器UA改为微信的然后刷新页面会发现不再提示请在微信客户端打开链接了但是整个页面一片空白。 b、使用抓包工具获取Cookie c、添加获取到的Cookie信息可使用 EditThisCookies 添加或修改Cookies。Firefox的话使用Firebug自带的编辑功能即可。 d、重新输入链接访问成功。 其他方法1利用微信官方的tbs调试。 其他方法2利用QQ浏览器内置的微信调试工具。 注绕过限制进去页面后有部分功能无法正常使用是由于页面使用了微信的jssdk内置方法wx.xx之类的。
请在微信客户端打开链接 渗透测试
微信小程序——Flex布局
小程序 框架 组件 表单元素— 布局 flex 排版官方建议 可响应式 div js css 布局排版
大小 顺序成员 样式 更改 成员 属性 样式 动态后台交互
flex 布局 属性
父级元素 定义 direction 成员元素 方向 属性 行 列 container 页面 定义 container flex布局 成员 块元素 并 添加样式 默认排序 从左到右样式设置
· flex -wrap 换行 平均分配 nowrap 默认不换行 justify -content 对齐方式 默认相左对齐 空白包裹 间隔空白 块成员 元素 width 失效 1 为等比分配
微信小程序——小程序UI框架首页 {navigationBarBackgroundColor: #5677FC,navigationBarTextStyle: white,navigationBarTitleText: Thor UI
}view classpage_hdview classpage_title bindtapdocimage src../../static/images/index/logo.png classlogo/imageview classtitleThor UIview classtui-badge文档/view/view/viewview classpage_desc小程序text classlink bindtaptemplate代码片段/text分享源码可去text classlink bindtapgithubGitHub/text下载/view/view商城首页
测试数据 data: {current: 0,tabbar: [{icon: home,text: 首页,size: 21}, {icon: category,text: 分类,size: 24}, {icon: cart,text: 购物车,size: 22}, {icon: people,text: 我的,size: 24}],hotSearch: [休闲零食,自热火锅,小冰箱迷你],banner: [1.jpg,2.jpg,3.jpg,4.jpg,5.jpg],category: [{img: 1.jpg,name: 短袖T恤}, {img: 2.jpg,name: 足球}, {img: 3.jpg,name: 运动鞋}, {img: 4.png,name: 中老年}, {img: 5.png,name: 甜美风}, {img: 6.jpg,name: 鱼尾裙}, {img: 7.jpg,name: 相机配件}, {img: 8.jpg,name: 护肤套装}, {img: 9.jpg,name: 单肩包}, {img: 10.jpg,name: 卫衣}],newProduct: [{name: 时尚舒适公主裙高街修身长裙,present: 198,original: 298,pic: 1.jpg,type: 1,isLabel: true}, {name: 高街修身雪纺衫,present: 398,original: 598,pic: 2.jpg,type: 2,isLabel: true}, {name: 轻奢商务上衣,present: 99,original: 199,pic: 3.jpg,type: 1,isLabel: true}, {name: 品质牛皮婚鞋牛皮婚鞋品质就是好,present: 99,original: 199,pic: 5.jpg,type: 1,isLabel: true}, {name: 轻奢时尚大包限时新品推荐,present: 99,original: 199,pic: 6.jpg,type: 1,isLabel: false}, {name: 高街修身长裙,present: 999,original: 1299,pic: 4.jpg,type: 2,isLabel: true}],productList: [{img: 1,name: 欧莱雅LOREAL奇焕光彩粉嫩透亮修颜霜 30ml欧莱雅彩妆 BB霜 粉BB 遮瑕疵 隔离,sale: 599,factory: 899,payNum: 2342},{img: 2,name: 德国DMK进口牛奶 欧德堡Oldenburger超高温处理全脂纯牛奶1L*12盒,sale: 29,factory: 69,payNum: 999},{img: 3,name: 【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红,sale: 299,factory: 699,payNum: 666},{img: 4,name: 百雀羚套装女补水保湿护肤品,sale: 1599,factory: 2899,payNum: 236},{img: 5,name: 百草味 肉干肉脯 休闲零食 靖江精制猪肉脯200g/袋,sale: 599,factory: 899,payNum: 2399},{img: 6,name: 短袖睡衣女夏季薄款休闲家居服短裤套装女可爱韩版清新学生两件套 短袖粉色长颈鹿 M码75-95斤,sale: 599,factory: 899,payNum: 2399},{img: 1,name: 欧莱雅LOREAL奇焕光彩粉嫩透亮修颜霜,sale: 599,factory: 899,payNum: 2342},{img: 2,name: 德国DMK进口牛奶,sale: 29,factory: 69,payNum: 999},{img: 3,name: 【第2支1元】柔色尽情丝柔口红唇膏女士不易掉色保湿滋润防水 珊瑚红,sale: 299,factory: 699,payNum: 666},{img: 4,name: 百雀羚套装女补水保湿护肤品,sale: 1599,factory: 2899,payNum: 236}],pageIndex: 1,loadding: false,pullUpOn: true},block wx:for{{tabbar}} wx:key{{index}}view classtui-tabbar-item {{currentindex?tui-item-active:}} data-index{{index}} bindtaptabbarSwitchtui-icon name{{currentindex?item.icon-fill:item.icon}} color{{currentindex?#E41F19:#666}} size{{item.size}} class{{index0?tui-ptop-4:}}/tui-iconview classtui-scale{{item.text}}/view/view/blocktabbarSwitch: function(e) {let index e.currentTarget.dataset.index;this.setData({current: index})if (index ! 0) {if (index 1) {this.classify();} else if (index 2) {wx.navigateTo({url: ../mall-extend/shopcart/shopcart})} else {wx.navigateTo({url: ../mall-extend/my/my})}}},微信小程序——自定义tabbar样式 view classnav-tabsview classtab-list {{currentTab idx?active:default}} wx:for{{tabArray}} wx:for-indexidx wx:for-itemitemName data-current{{idx}} bindtapswichNav{{itemName}}/view
/viewview class{{currentTab idx?show:hidden}} tab-content wx:for{{tabArray}} wx:for-indexidx wx:for-itemitemName{{itemName}}/view!--可滑动切换tanbar--
view classnav-tabsview classtab-list {{currentTab idx?active:default}} wx:for{{tabArray}} wx:for-indexidx wx:for-itemitemName data-current{{idx}} bindtapswichNav{{itemName}}/view
/viewswiper current{{currentTab}} classtab-content duration300 bindchangebindChange
swiper-item wx:for{{tabArray}} wx:for-indexidx wx:for-itemitemName classview class{{itemName}}/view
/swiper-item
/swiper /**index.wxss**/
page{display: flex;flex-direction: column;height: 100%;
}
.nav-tabs{width: 100%;height: 75rpx;display: flex;
}
.tab-content{flex: 1;
}
.default{line-height:75rpx;text-align:center;flex:1;border-bottom:1px solid #eee;color:#000;font-weight:bold;font-size:28rpx;
}
.active{line-height:75rpx;text-align:center;color:#fc5558;flex:1;border-bottom:1px solid red;font-weight:bold;font-size:28rpx;
}
.show{display:block;flex: 1;
}
.hidden{display:none;flex: 1;
}data: {currentTab:0,tabArray:[tab1, tab2, tab3, tab4]},bindChange: function( e ) { var that this; that.setData( { currentTab: e.detail.current }); }, swichNav: function( e ) { var that this; console.log(e.target)if( this.data.currentTab e.target.dataset.current ) { return false; } else { that.setData( { currentTab: e.target.dataset.current }) } }, 微信小程序——拖拽定位 微信小程序——登陆界面与逻辑 view classtui-bg-boximage src /bg_login.png classtui-bg-img/imageimage src /mine_def_touxiang_3x.png classtui-photo/imageview classtui-login-nameThor UI/view/view.tui-bg-box {width: 100%;box-sizing: border-box;position: relative;padding-top: 44rpx;
}.tui-bg-img {width: 100%;height: 346rpx;display: block;position: absolute;top: 0;z-index: -1;
}.tui-photo {height: 138rpx;width: 138rpx;display: block;margin: 10rpx auto 0 auto;border-radius: 50%;
}.tui-login-name {width: 128rpx;height: 40rpx;font-size: 30rpx;color: #fff;margin: 36rpx auto 0 auto;text-align: center;
}.tui-login-from {width: 100%;padding: 128rpx 104rpx 0 104rpx;box-sizing: border-box;
}.tui-line-cell {padding: 27rpx 0;display: -webkit-flex;display: flex;-webkiit-align-items: center;align-items: center;position: relative;
}微信小程序——开源-商城 首页学习分析 /**** 配套视频教程请移步微信-小程序-灵动云课堂* 关注订阅号【huangxiujie85】第一时间收到教程推送** link http://blog.it577.net* author 黄秀杰*/const AV require(../../utils/av-weapp.js)
Page({data: {banner: [],goods: [],bannerHeight: Math.ceil(290.0 / 750.0 * getApp().screenWidth)},onLoad: function (options) {this.loadBanner();this.loadMainGoods();this.getInviteCode(options);/* debug navi */// wx.navigateTo({// url: /pages/goods/detail/detail?objectId5816e3b22e958a0054a1d711// });},getInviteCode: function (options) {if (options.uid ! undefined) {wx.showToast({title: 来自用户: options.uid 的分享,icon: success,duration: 2000})}},loadBanner: function () {var that this;var query new AV.Query(Banner);// query.include(image);query.find().then(function (bannerObjects) {var banner [];for (var i 0; i bannerObjects.length; i) {banner.push(bannerObjects[i].get(image).get(url));}that.setData({banner: banner});});},loadMainGoods: function () {var that this;var query new AV.Query(Goods);query.equalTo(isHot, true);query.find().then(function (goodsObjects) {that.setData({goods: goodsObjects});});},showDetail: function (e) {var index e.currentTarget.dataset.index;var goodsId this.data.goods[index].id;wx.navigateTo({url: ../goods/detail/detail?objectId goodsId});},showCategories: function () {// wx.navigateTo({// url: ../category/category// });wx.switchTab({url: ../category/category});},showOrders: function () {wx.navigateTo({url: ../order/list/list?status1});},onShareAppMessage: function () {return {title: 灵动开源电商系统,desc: 一个基于LeanCloud开发的开源电商系统,path: /pages/index/index?uid4719784}},showGoods: function () {wx.navigateTo({url: ../goods/detail/detail?objectId5816e3b22e958a0054a1d711});}
})微信小程序——开源-知乎日报客户端源码学习 致敬原创作者 谢谢 如有冒犯请联系我 //splash 分析 requests 在接下来 分析学习 计算窗口面积 sizerequest - getsplashcover 跳转到首页关于 request 的引用 以后再说 生命周期 onlaunch 当小程序初始化完成时会触发 onLaunch 全局只触发一次app.js onLoad: 页面加载 小程序注册完成后加载页面触发onLoad方法。 一个页面只会调用一次可以在 onLoad 中获取打开当前页面所调用的 query 参数页面js。 onShow: 页面显示 页面载入后触发onShow方法显示页面。 每次打开页面都会调用一次比如当小程序有后台进入到前台运行或重新进入页面时。 onReady: 首次显示页面页面初次渲染完成会触发onReady方法渲染页面元素和样式一个页面只会调用一次代表页面已经准备妥当可以和视图层进行交互。 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。 onHide: 页面隐藏 当navigateTo或底部tab切换时调用。 onUnload: 页面卸载 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack的时候调用。
基本上可以说执行顺序为onLaunch–onLoad–onShow–onReady–onHide. 虽然说onLaunch在onLoad之前执行 但是在onLaunch里请求获取是否有权限等待返回值的时候Page里的onLoad事件就已经执行了。
解决办法 在APP里面onLanch中的网络请求中设置判断
if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) }
在page的onLoad中设置一个回调
app.userInfoReadyCallback res { if (res ! ‘’) { console.log(“app.globalData.userInfo”) } }
再来看 上面的获取设置参数 的 程序接着往下看
typeof cb “function” cb( this.globalData.userInfo ) 判断cb是不是函数类型同时将一个参数传入名为cb的函数下 对应首页 对于用户数据的 getuserinfo调用 if else 语句 来处理用户信息 存在与否的 处理流程 更新 设置函数往下看 分别为 获取缓存 函数 和 全局变量看到了 一开始 获取设置 的 数据 appsetting
— app.js 结束
老版本 授权弹框 的问题 需要解决 设计 流程
先分析产品需求 -- UI设计 --架构选型设计分析— 框架搭建–前端服务实现设计 -- 后端服务实现开发–内网测试— 可运维架构部署测试 — git优化改良测试– 分布式容器云部署 微信小程序——小程序/公众号/H5支付 PHP微信小程序联调——用户信息授权 微信小程序——表白墙 前台 开发整理 - 引入了 一个 模版文件
定义 template 使用 模版 JS 文件加载数据 - Navigation 页面链接
自定义data-属性和获取值url链接带参数和获取值 在view里定义data-为任意单词绑定点击事件XXXX view classXXXX wx:for{{taskLists}} data-id{{item.objectId}} bindtapXXXX
在js的XXXX里利用e.currentTarget.dataset.*接收data-的值 XXXX:function(e){ var taskId e.currentTarget.dataset.id; wx.navigateTo({ url: xxxx/taskDetail?taskId taskId, }) },
url拼接字符串的方式为 url: xxxx/taskDetail?taskId taskId 然后我们去到跳转的页面通过onload函数就可以打印出传过来的参数啦 onLoad: function (options) { console.log(options) }, 返回 index.wxml 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话overflow-y: visible|hidden|scroll|auto|no-display|no-content; indicator-dots boolean false 否 是否显示面板指示点 autoplay boolean false 否 是否自动切换 interval number 5000 否 自动切换时间间隔 duration number 500 否 滑动动画时长 设置段落的最小高度 block标签 并不是一个组件它仅仅是一个包装元素不会在页面中做任何渲染只接受控制属性 wx:if 添加到一个标签 判断
多个组件标签 使用一个 标签将多个组件包装起来并在上边使用 wx:if 控制属性 类似 block wx:if也可以将 wx:for 用在标签上以渲染一个包含多节点的结构块 swiper-item 仅可放置在swiper组件中宽高自动设置为100%。 item-id string 否 该 swiper-item 的标识符 、
iconfont-字体图标 base64格式 把转换后下载的压缩包解压把 stylesheet.css 中的font-face引入自己的 css
wx.navigateTo(Object object)
保留当前页面跳转到应用内的某个页面。 但是不能跳到 tabbar 页面。 使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 keyframes 规则
app.js const 限定一个变量不允许被改变产生静态作用 require是运行时调用所以require理论上可以运用在代码的任何地方
LeanCloud官方有很多教程我们关注JavaScript相关的。
JavaScript SDK 安装指南 我们不用安装只是为了直观的了解 LeanCloud 的一些界面、设置比如CDN加速 设置、LeanCloud的github。
数据存储入门教程 · JavaScript : 这里有个可操作的demo由于Hexo主题中已经有关于LeanCloud的代码我没有执行这个demo 直接拿Hexo主题中的LeanCloud代码来测试。 其实为了更好的理解LeanCloud的知识还是需要动手操作一下demo的。
数据存储开发指南 · JavaScript 这篇是必读如果是利用LeanCloud从头开发一些功能就需要精读这篇帮助。 我只获取了一些基本信息比如WEB安全的设置、LeanCloud中的对象AV.Object和AV.File。 对象的创建、保存、读取对象的属性获取计数器相关的。
index.js release 发布 微信小程序——常用组件
组件
页面 样式修饰 布局 id style class 等 公用属性 hidden 消除 懒加载data 数据集 事件响应前后端交互 属性类型 视图组件 按住变色 默认50ms 1s 变色 2s变回来 阻止冒泡事件 scroll-view 组件 可滚动视图 触发事件 用在预加载 下拉调用分页拼接 手机运行 调试器为web页面 指定成员Id 并且唯一 横向滑动 视频分类 人为滑动 swiper 轮播图 组件 数据动态
可缩放view form表单 微信小程序——同异步数据传输
#2019.12.5#本地缓存 H5 localStorage 永久存储本地数据 前提
线程的同步和异步是针对多核CPU而言的没有多核CPU就没有异步的概念此时全是同步的
下面以四核CPU为例子用图解的方式看同步和异步的区别
所谓同步就是每次只有一个线程能去执行即使有多的计算资源在这里指多余的CPU也不会去用一次只有一个线程去用可以看作是豪华型执行过程。注意此时因为只有一个线程A可以执行所以它可以任意选择某个CPU。其它的线程只有等这个线程A执行完毕后才可以继续进入执行。所谓的异步就是一个CPU对应了一个线程一次可以执行更多的线程开口更大。当然哪个线程对应哪个CPU的顺序没要求一批一批的执行可以看作是高效型执行过程。 remove 一个一个的移除clean 清除 全部缓存清除
#传参# 异步 success fail complete  {const { bottom, paddingBottom } getMenuButtonBoundingClientRectLocal()this.setData({isSupportNavigation: isSupportNavigation(),navHeight: bottom paddingBottom,})},
