1. 程式人生 > >微信小程式-入門篇(app.json)

微信小程式-入門篇(app.json)

搞安卓的建議看看微信的小程式,工作之餘能陶冶下自己的情操,啊廢話不多說了上乾貨。
1.整好開發工具配置後映入眼簾的是三個檔案
app.js app.json app.wxss
1.1 我們先看看app.json
它有四個節點 pages,tabBar和window 其中pages用來定義我們宣告的資料夾集合相當於安卓裡面的AndroidManifest.xml

1.1.1 pages主要定義了我們的檔案集合如pages/index/index代表page下面的index資料夾下index檔案集合(宣告檔案集合要按照規範來名字要一致)

1.1.2 window 屬性它是用於設定小程式的狀態列、導航條、標題、視窗背景色。
navigationBarBackgroundColor 設定導航欄背景
navigationBarTextStyle 設定標題欄顏色僅支援黑白
navigationBarTitleText 導航欄標題內容
backgroundColor 視窗背景顏色 (下拉重新整理背景色)
enablePullDownRefresh 下拉重新整理控制

1.1.3 tabBar底部的導航欄用於設定底部的按鈕這個節點很簡潔明瞭 “list”: []代表陣列內容裡面{ }代表著具體內容感覺這個json是比較清晰的
針對整個tabBar集合的設定:
color文字的顏色
selectedColor文字選中的時候顏色
backgroundColor文字的背景色
borderStyle文字邊框顏色僅支援黑白
position位置可以是bottom 也可以是top
針對單個tab的設定
pagePath用於設定點選跳轉的介面
text用於設定底部導航欄的標題文字
iconPath底部或頂部導航欄的按鈕圖片圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,當 postion 為 top 時,此引數無效
selectedIconPath選中時的圖片路徑 圖片格式同上

1.1.4 networkTimeout這裡我們設定請求超時時間
這裡有如下幾個節點
request 請求超時時間
connectSocket連結時長
uploadFile上傳超時時間
downloadFile下載超時時長
1.1.5 “debug”: true是否為debug模式

//page.json————————————————————————————————————–
介面上的json只是設定 app.json 中的 window 配置項的內容即設定了改變導航欄以及設定下拉重新整理的控制。
這裡之列舉一個文件上的例子
{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “微信介面功能演示”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”
}

相關推薦

程式-入門(app.json)

搞安卓的建議看看微信的小程式,工作之餘能陶冶下自己的情操,啊廢話不多說了上乾貨。 1.整好開發工具配置後映入眼簾的是三個檔案 app.js app.json app.wxss 1.1 我們先看看app.json 它有四個節點 pages,tabBa

程式入門(二)

上篇我們講解了一下小程式的整體架構,今天來講一下,一個頁面的具體實現原理,好注意聽,下面要開始畫重點啦~哈哈 頁面的構成 還記得我們在上篇文章中講解如何加入一個介面嗎?在app.json中的pages加入要加的檔案路徑就可以啦,檔案路徑可以隨便起,系統

程式開發有關app.json總結

剛剛開始小程式開發的時候,遇到最多的就是app.json找不到某個page的錯,可是我明明已經在app.json中寫好了,把開發者工具重啟了N次也沒有效果,但是我男朋友的都沒有報錯,知道過了幾天才發現是我的命名方式有問

前端開發----程式入門級教程(前

前言 前段時間,憑藉著出生牛犢不怕虎的勁頭,憑藉著一點Java基礎和前端入門的知識水平,買了域名和伺服器準備搭建自己的一個技術站點,初衷是旨在打造自己成為一個T形全站工程師。後經過各種百度,各種折騰終於大概在半個月左右的時間寫好了幾個基本介面,能上傳圖片,釋出

看這一就夠啦!程式入門與實戰,橫掃常用元件API開發技巧(完整版包含全部原始碼)

第1章:什麼是微信小程式? 1 開篇及課程特色介紹 2 直觀感受一下微信小程式 3 小程式適合做什麼樣的應用 4 對開發者的影響 5 學習基礎 6 小作業 第2章:小程式環境大件與開發工具介紹 1 開篇介紹及下載工具 2 小程式目前情況及限制 3 小程式開發

程序入門

wid 生命 組織 後綴 哪些 獲取 註意 響應 創建 好了,本期博主將要講解微信小程序開發的第二篇,本博文將講解微信小程序開發的入門,好了廢話不用多說,開噴吧 點擊開發者工具左側導航的“編輯”,我們可以看到這個項目,已經初始化並包含了一些簡單的代碼文件。最關鍵也是必不可少

程式(看文件寫例項十一)程式課堂寶APP完結總結及github地址

一、總結 國慶假期偷懶了幾天,從接到任務到分析到實現總共花了20天左右,終於完成了,點名功能由於要實時監聽需要收費,所以沒有給出程式碼,需要完成的可以自己動手實現。用一張導圖來結束: 二、原始碼地址 所有原始碼已經上傳https://github.com/SoleilLuo/Stu

程式(看文件寫例項十)程式課堂寶APP實現我的模組相關介面及邏輯

繼上篇博文,這篇完成最後一個模組,即我的模組。 一、頁面效果 這個模組是和使用者型別相關的,因此老師賬號和學生賬號能看的功能不一樣,老師端效果如下: 點選頭像到達個人資訊如下: 點選後可以做相應的修改。學生端的介面如下: 修改密碼的頁面如下: &nbs

程式(看文件寫例項八)程式課堂寶APP實現練習模組前臺

接上篇博文,這篇主要描述練習模組的前臺顯示,其中包括test頁面,答題detail頁面以及提交答題後答卷answer頁面。 一、練習模組test頁面 練習頁面主要展示的是當前使用者的頭像,暱稱以及學校資訊,另外還有答題資訊,以及每個章節的練習資訊,先來看看效果: grid用的是樣式

程式(看文件寫例項七)程式課堂寶APP實現線上課堂測試

接著上篇博文已經完成簽到功能,這篇來完成課堂測試功能。 一、需求描述 1、在後臺選擇題、主觀題表中上傳測試題 2、客戶端獲取題目資訊 3、把題目資訊格式化載入顯示 4、客戶端答題,主觀題每題能上傳一張答題圖片 5、客戶端答題結束提交到伺服器 二、前臺頁面 提交大量資料

程式(看文件寫例項六)程式課堂寶APP實現簽到邏輯

繼上篇博文,這篇寫下籤到實現的邏輯。 一、實現邏輯 發起簽到 1、先上傳當前自己的定位經緯度 2、學生查詢老師的最後一次簽到記錄,如果發現簽到記錄signComplete為false說明有新的簽到 3、得到簽到的第幾次課 4、系統獲得學生的定位經緯度 5、判斷兩點經緯度轉

程式(看文件寫例項五)程式課堂寶APP實現獲取簽到列表

根據上篇博文,這篇主要實現獲取簽到列表邏輯。 獲得簽到列表主要有以下步驟: (1)查詢老師的ID (2)查詢老師的簽到記錄 (3)如果當前使用者是老師,直接顯示所有記錄,因為簽到記錄都是老師發起的,肯定每次都簽到 (4)如果當前使用者是學生,以老師的簽到列表作為長度,然後以ite

程式(看文件寫例項四)程式課堂寶APP實現簽到子頁面佈局及課程視訊播放頁面

一、簽到子頁面佈局 子頁面主要是一個簽到按鈕,然後下方是簽到記錄列表。 1、簽到按鈕 佈局程式碼: <button class='sign-button' bindtap='sign'>簽到</button>

程式(看文件寫例項三)程式課堂寶APP實現整體介面框架及首頁佈局

一、首頁佈局簡單思路 回顧上一篇博文,首頁的內容主要有輪播圖,橫向滑動選單以及選單對應的view,橫向滑動選單有簽到、課堂測試、模擬測試、課堂提問、答問記錄五個選項,當點選選項時更新顯示view。由於素材和時間有限,所以佈局做得相對簡單,主要是側重思路及程式碼邏輯。 二、輪播圖 檢視文件

程式入門學習筆記(二)——阿里雲伺服器PHP MYSQL Apache配置

持續更新 持續學習 感謝原文大佬連結 https://www.linuxidc.com/Linux/2017-08/146220.htm 筆者在阿里雲上買了輕量應用伺服器 學生認證通過以下 便宜的 選擇的CentOS 7.3 64位  https://promot

程式入門學習筆記(一)

入門級的跳轉格式: wx.redirectTo():不能返回上一層頁面 wx.navigateTo():用於頁面的跳轉 以上兩個不能跳轉於"tabBar" 因此跳轉"tabBar": wx.switchTab 感謝大佬的教程解答 了我的問題 以下附上原文連結 作者

程式入門與實戰 常用元件 API 開發技巧 專案實戰

      開始就以專案為出發點,不會講一大堆枯燥的語法再補充兩個案例了事,將帶你快速熟悉小程式基礎知識,然後直接進入實戰開發環節,將小程式的知識點貫穿在整個專案中        課程不僅僅講解小程式開發,更會通過實際的編碼來

程式入門基礎教程

準備工作 要開發微信小程式之前,需要做一些準備工作,首先進入https://mp.weixin.qq.com/debug/wxadoc/dev/index.html去下載快速開發原始碼包 然後再進入https://mp.weixin.qq.com/debug/wxadoc/

程式入門之使用者登陸態

微信小程式的設定是不支援session,那麼cookie之流肯定是用不了的。微信對wx.request這個API做了修改,小程式發起的請求並不是直接請求我們的後臺伺服器,而是先通過微信的伺服器再發送到我們的後臺伺服器,既然請求都是要通過微信的伺服器傳送到我們的伺服器,那麼我們的伺服器也就無從識別請求

程式與傳統APP大比拼

2016年1月11日,微信之父張小龍公開表態,未來兩年,80%的APP市場將被小程式取代。市場競爭日益劇增,一場移動網際網路的“革命”正在拉開序幕。過去人們買手機都會考慮一個重要問題,那就是記憶體,總會選擇買大記憶體的手機,因為手機裡總會裝著各種不同型別的APP軟體。隨著微信小程式的崛起,APP受到了不小的衝