json 微信小程序 筛选_微信小程序学习记录

全局配置

app.json 文件用来对微信小程序进行全局配置。

pages 类型为 String Array 是 页​面路径列表,创建目录和更改时会自动更改文件。

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径+文件名 信息。

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

//导航栏背景颜色 只能用#---- 格式"navigationBarBackgroundColor": "#FF7F50",

效果图

59381043a0847e5c265461d832579e23.png

//导航栏标题颜色,仅支持 black / white "navigationBarTextStyle": "white",

6326d7e53b6a5e38c28dd8ddc34f2572.png

//导航栏标题文字"navigationBarTitleText": "WeChat 技术博文头条",

8cc43885ae9bc3e0165eeffc0bcc931a.png

//导航栏样式,仅支持以下值:

//默认样式 default 展示导航栏标题文字

//custom 自定义 导航栏,关闭导航栏文字显示 只保留右上角胶囊按钮。

"navigationStyle":"custom",

f853fc2dfe034ef827b460676c80c77d.png

//下拉 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"      }    ]  }
a810690783dbcd8bc39c341976f08cf4.png

代码效果图

仅支持十六进制颜色 (只能填写 ‘#00000’ 类似这样的颜色标记)

8f43036d3d69d22dfcaff7a32a4a1460.png

list 接受一个数组,只能配置最少2个、最多5个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

4a499344f913d46addddab23713fbbe0.png

官方示意图

886d83e877a7f116108c5516c08d209f.png

图片存储

6e93ce0d5262d16122669cf36af92011.png

图标下载地址推荐 Iconfont-阿里巴巴矢量图标库 github帐号可登陆:https://www.iconfont.cn/

selectedColor 点击时tab上的文字切换背景色。测试未达到想过,百度无果。如有知道的请留言,谢谢。

permission

小程序接口权限相关设置。字段类型为 Object;

{"pages": ["pages/index/index"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}}

scope 列表

dc5dbbcc9b256f86f885cca0ab05b3a7.png

页面配置

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

配置示例

{  "navigationBarBackgroundColor": "#ffffff",  "navigationBarTextStyle": "black",  "navigationBarTitleText": "微信接口功能演示",  "backgroundColor": "#eeeeee",  "backgroundTextStyle": "light"}

页面配置项列表

6da73ab6c97da2c980288d7a9bed7840.png

页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性。

微信小程序登录 后台java 代码已搞定。测试完成上传 2019.1.11

8a545b041394da4cd62f720f357eedac.png

登录后台代码 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 "";    }
e637e3cb400e8fbf2a2bb2b401da74ad.png

页面加载时读取后台数据

8585fa67d5b7b3783d6e6b6ef284f1d6.png
用户信息列表

{{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);      }    })  },
e601aa53006f3505e92bdab056f659e7.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一定质量的封闭气体被压缩后_多晶硅氯氢化装置补充氢隔膜压缩机十字头铜套磨损原因分析与改善探讨...

潘祝新,王永(江苏中能硅业科技发展有限公司,江苏徐州221004)[摘要]:补充氢气压缩机是多晶硅行业氯氢化装置中的关键设备,它为生产系统的稳定运行不断的补充高纯氢气,其稳定而高效的运行对于生产系统的稳定性及提高氯硅…

vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js

封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护。好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用。本文讲述了如何一步步从0到1封装发布一个常用的toast组件的过程。本文是搭…

实现拓扑图_20源码实现【自动寻路】 —【拓扑图】—网游城市互传最优路径算....

金猪脚本(原飞猪脚本)以按键精灵教学为主,涉及UiBot,Python,Lua等脚本编程语言,教学包括全自动办公脚本,游戏辅助脚本,引流脚本,网页脚本,安卓脚本,IOS脚本,注册脚本,点赞脚本,阅读脚本以及网赚脚本等各个领域。想学习按键精灵的朋友可以添加金猪脚本粉丝交流群:554…

Windows快捷键大全

天气:心情:Windows快捷键大全 一、常见用法: F1 显示当前程序或者windows的帮助内容。 F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F10或ALT 激活当前程序的菜单栏 windows键或CTRLES…

南邮哈夫曼编码c语言代码_漫画:“哈夫曼编码” 是什么鬼?

​在上一期,我们介绍了一种特殊的数据结构 “哈夫曼树”,也被称为最优二叉树。没看过的小伙伴可以点击下方链接:漫画:什么是 “哈夫曼树” ?那么,这种数据结构究竟有什么用呢?我们今天就来揭晓答…

查重多少合格_期刊论文查重一般多少合格?

sci遴选目标是收录相对较为重要的期刊,但世界上期刊太多太多,从中遴选出重要的期刊,会有筛选标准,即sci只会收录部分期刊。众多期刊中,谁能成为sci期刊,就要达到sci收录的标准,而标准少不了参考…

bzoj2060[USACO2010,Nov]Visiting Cows拜访奶牛

题目链接&#xff1a;bzoj上是权限题~ 题目大意&#xff1a; 题解&#xff1a; 树型DP f[i][0]表示不选i&#xff0c;f[i][1]表示选i。(因为很水..就不详写了) 可列出方程&#xff1a; f[i][0]sigama(max(f[y][1],f[y][0])); f[i][1]sigama(f[y][0]); y为i的孩子 #include<c…