全局配置

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 微信小程序 筛选_微信小程序学习记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。