json 微信小程序 筛选_微信小程序学习记录
全局配置
app.json 文件用来对微信小程序进行全局配置。
pages 类型为 String Array 是 页面路径列表,创建目录和更改时会自动更改文件。
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。
window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
//导航栏背景颜色 只能用#---- 格式"navigationBarBackgroundColor": "#FF7F50",
效果图
//导航栏标题颜色,仅支持 black / white "navigationBarTextStyle": "white",
//导航栏标题文字"navigationBarTitleText": "WeChat 技术博文头条",
//导航栏样式,仅支持以下值:
//默认样式 default 展示导航栏标题文字
//custom 自定义 导航栏,关闭导航栏文字显示 只保留右上角胶囊按钮。
"navigationStyle":"custom",
//下拉 loading 的样式,仅支持 dark / light
"backgroundTextStyle": "light",
//顶部窗口的背景色,仅 iOS 支持
"backgroundColorTop":"#ffffff",
//底部窗口的背景色,仅 iOS 支持
"backgroundColorBottom":"#ffffff",
//是否全局开启下拉刷新。true 默认false
"enablePullDownRefresh":true,
//页面上拉触底事件触发时距页面底部距离,单位为px。 **未测试出效果**
"onReachBottomDistance":100,
//设置为 true 则页面整体不能上下滚动。
//只在页面配置中有效,无法在 app.json 中设置
"disableScroll":true,
//禁止页面右滑手势返回 设true禁止右滑动返回
"disableSwipeBack":false
tabBar 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
"tabBar": { "color": "#FF0000", "selectdColor":"#FF0000", "backgroundColor":"#FDF5E6", "borderStyle":"white", "position":"bootm", "list": [ { "pagePath": "pages/index/index", "text": "主页", "iconPath": "images/tabBar/home_dark.png", "selectedIconPath": "images/tabBar/home_bright.png" }, { "pagePath": "pages/userInfo/userInfo", "text": "个人信息", "iconPath": "images/tabBar/user_dark.png", "selectedIconPath": "images/tabBar/user_bright.png" } ] }
代码效果图
仅支持十六进制颜色 (只能填写 ‘#00000’ 类似这样的颜色标记)
list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
官方示意图
图片存储
图标下载地址推荐 Iconfont-阿里巴巴矢量图标库 github帐号可登陆:https://www.iconfont.cn/
selectedColor 点击时tab上的文字切换背景色。测试未达到想过,百度无果。如有知道的请留言,谢谢。
permission
小程序接口权限相关设置。字段类型为 Object;
{"pages": ["pages/index/index"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}}
scope 列表
页面配置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。
配置示例
{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light"}
页面配置项列表
页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。
微信小程序登录 后台java 代码已搞定。测试完成上传 2019.1.11
登录后台代码 java
//utils 包 public class Wx { private String openid; private String session_key; public String getOpenid() { return openid; } public void setOpenid(String openid) { this.openid = openid; } public String getSession_key() { return session_key; } public void setSession_key(String session_key) { this.session_key = session_key; }} //controller 包@GetMapping("login") @ResponseBody public String login(String code){ //测试版本 创建测试号 String appid =""; //测试号appId String SECRET =""; //测试号appsecret //微信的接口 String url = "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+ "&secret="+SECRET+"&js_code="+ code +"&grant_type=authorization_code"; RestTemplate restTemplate = new RestTemplate(); //进行网络请求,访问url接口 ResponseEntity responseEntity1 = restTemplate.exchange(url, HttpMethod.GET,null,String.class); // System.out.println(responseEntity1); //根据返回值进行后续操作 if (responseEntity1 !=null && responseEntity1.getStatusCode() == HttpStatus.OK){ String sessionData = responseEntity1.getBody(); Gson gson = new Gson(); //解析从微信服务器获得 openId 和 session_key; Wx wxinfo=gson.fromJson(sessionData, Wx.class); //获取唯一标识 String openid = wxinfo.getOpenid(); //获取会话密钥 String session_key = wxinfo.getSession_key(); // System.out.println("openid:"+openid+"/session_key="+session_key); } return ""; }
页面加载时读取后台数据
用户信息列表
{{item.username}}
{{item.realName}}
/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this; wx.request({ url: 'http://192.168.1.139:8080/user/infoList', method: "GET", success: function(res) { if (res.data.code == 1) { console.log(res); //获取信息集合 that.setData({ //信息集合 userLisr: res.data.data.list, //页码 pageNum: res.data.data.pageNum, //总页数 pages: res.data.data.pages }) }else{ wx.showToast({ //提示信息 title: "加载失败", //图标 //icon: 'loading', image: '../../images/resultImg/shibaiBright.png', //持续时间 默认毫秒 duration: 2000, //是否显示透明蒙层,防止触摸穿透,默认:false mask: true }) } }, fail: function(error) { console.log(error); } }) },
下拉刷新分页读取数据
/** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { var that = this; //console.log("刷新了") //如果当前页数大于等于总页数则归零 if (this.data.pageNum >= this.data.pages) { this.setData({ pageNum: 0 }) }else{ this.setData({ pageNum: this.data.pageNum + 1 }) } //获取data里的值 // console.log(this.data.pageNum); wx.request({ url: 'http://192.168.1.139:8080/user/infoList', data: { page: this.data.pageNum }, method: "GET", success: function (res) { if (res.data.code == 1) { // console.log(res); //获取信息集合 that.setData({ //信息集合 userLisr: res.data.data.list, //页码 pageNum: res.data.data.pageNum }) //关闭下拉刷新 wx.stopPullDownRefresh() } else { wx.showToast({ //提示信息 title: "加载失败", //图标 //icon: 'loading', image: '../../images/resultImg/shibaiBright.png', //持续时间 默认毫秒 duration: 2000, //是否显示透明蒙层,防止触摸穿透,默认:false mask: true }) } }, fail: function (error) { console.log(error); } }) },
json 微信小程序 筛选_微信小程序学习记录相关推荐
- json 微信小程序 筛选_微信小程序(同城小程序)_总结二(筛选功能)
一.前言 二.主要内容 1.功能描述:通过选择类型和时间对请求到的活动进行帅选 2.具体实现 2.1根据城市请求活动 /*获取活动 :根据城市,日期,活动类型获取*/getActicityByLoca ...
- 微信链接修改图片_微信链接修改图标
自定义链接是什么?微信链接修改图片_微信链接修改图标 自定义微信分享链接是指将一条网页链接通过微信接口生成一张卡片,并且该卡片的标题,内容和图片都可以自己编辑.如下图效果 ● 未自定义的网页链接 ● ...
- 微信公众平台接口调试工具json格式不对怎么搞_微信小程序 开发插件
开发插件 开发插件前,请阅读了解 <小程序插件接入指南> 了解开通流程及开放范围,并开通插件功能.如果未开通插件功能,将无法上传插件. 创建插件项目 插件类型的项目可以在开发者工具中直接创 ...
- api 定位 微信小程序 精度_微信小程序城市定位(借助百度地图API判断城市)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- api 定位 微信小程序 精度_微信小程序开发知识点集锦
一 小程序的生命周期 代码生命周期就是一个对象的生老病死,通常指程序从创建.开始.暂停.唤起.停止.卸载的过程.小程序的生命周期又可分为应用生命周期和页面的生命周期,先单独分析,在结合两者分析 应用生 ...
- api 定位 微信小程序 精度_微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
- js微信监听返回_微信小程序(2)- 框架结构amp;运行环境
一.小程序框架结构 小程序框架分场景获取.逻辑层和视图层 场景获取:场景值是用来描述用户进入小程序的路径,可以在小程序的生命周期onLaunch 或 onShow 里获取.也可以通过wx.getLau ...
- webstorm下载微信小程序插件_微信电脑版可以打开小程序喽 前提你得下载测试版...
据微信开发者团队消息最新推出的小程序开发套件已经支持开发者面向电脑版微信测试微信小程序相关功能. 开发者下载新版本开发套件即可针对电脑版微信进行小程序调试,不过似乎也没有什么需要特别调试的地方. 既然 ...
- 微信公众号发送小程序卡片_微信公众号群发文章支持添加小程序卡片
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?下面爱站技术频道的小编带来的详细教程. 微信公 ...
最新文章
- 如何写出安全的、基本功能完善的Bash脚本
- element-ui中的中国省市区级联选择器
- ASP.NET真假分页—真分页
- springMVC 几种页面跳转方式
- python3精要(21)-函数(2)
- AcWing 3195. 有趣的数
- 嵌入式linux工程师 考试,嵌入式Linux工程师常见笔试题.doc
- 系统升级不停服务器,服务器操作系统一直升级吗
- 软件设计师21-计算机体系结构
- springmvc中的session:不比对数据库自动登陆
- 去重 属性_亿万级海量数据去重软方法,spark/flink/mr等通用
- nbu备份本机oracle,nbu 7.1 备份恢复ORACLE实践手册
- Please define INSTALL4J_JAVA_HOME to point to a suitable JVM 的解决办法
- mini-pcie接口(EC20和N720)
- 线性波传播至垂直壁面反射形成驻波的动画MATLAB程序
- 【学习笔记】原根 + 欧拉定理 + 威尔逊定理
- 《WEB性能测试实战》之WEB性能测试分析
- Wattagio for Mac(Mac电池管理软件)v1.12.11
- Java中正负数二进制表示
- PHP多文字,二维码(动态、非动态)生成海报方式
热门文章
- “约见”面试官系列之常见面试题之第六十七篇之jsonp原理和实现(建议收藏)
- 前端学习(2136):使用es6模块化出现Access to script at ‘file:///... ..from origin ‘null‘ has been blocked。。。错误
- 前端学习(1898)vue之电商管理系统电商系统之渲染用户的对话框
- 前端学习(1746):前端调试值之时间监听
- 前端学习(1036):bootstrap-js插件2
- shiro学习(5):ini文件和自定义realm
- 68 cookie在登录中的作用
- 手机端双击页面放大的问题
- CSS之Flexbox制作CSS布局易如反掌
- [资源]推荐一些Python书籍和教程,入门和进阶的都有!