1, on the uni-app framework configured :( The following is to create the basic directory structure uni-app items)
pages.json file is used for uni-app configured globally, determine the page file path, window style, native navigation bar at the bottom of the tabbar and so on. (App.sjon similar small program)
Example :( The following is pages.json contains all the configuration options)
{
"Pages and the": [{
"path": "Pages and the / index / index",
"style": {// set the status bar for each page, the navigation bar, title, window background color, etc.
"navigationBarTitleText": "import documents", // navigation bar title text
"enablePullDownRefresh": true, // open the drop-down refresh
}
}, {
"path": "Pages / Home / Home",
"style": {
"navigationBarTitleText": "Home"
}
}, {
"path": "Pages / Classify / Classify",
"style": {
"
"navigationBarTextStyle": "black", // title of the navigation bar and status bar color foreground color, only support Black / White
"navigationBarTitleText": "Demo", // navigation bar title text
"navigationBarBackgroundColor": "# f7f7f7" , / / navigation bar is the default background color f7f7f7 #
"backgroundColor": "# FFFFFF", // background color of the window
"usingComponents": {} // references applet components
},
"tabBar": {
"color": "# FFFFFF ", // tab above the default text color
" selectedColor ":" # 00cf89 " , // tab on the color of the text when selected
" backgroundColor ":" # ffffff " , // tab background color
" borderStyle ":" black " , // tabbar color on the border, optional value Black, White
"height": "50px",// tabbar default height
"fontSize": "10px", // default text size
"iconWidth": "24px", // width ratio of the default icons such as zoom
spacing "3px", // icons and text: "spacing"
"list":[{ // tab 列表
"pagePath":"pages/home/home",
"iconPath":"static/image/img.png",
"selectedIconPath":"static/image/img_on.png",
"text":"home"
},{
"pagePath":"pages/classify/classify",
"iconPath":"static/image/ify.png",
"selectedIconPath":"static/image/ify_on.png",
"text":"classify"
}],
"midButton":{ // 中间按钮 ，仅在 list 项为偶数时有效
"width":"80px",
"height":"50px",
"text":"text",
"iconPath:"static/image/btn.png",
"iconWidth":"24px",
"backgroundImage":"static/image/btn_on.png"
}
}
}
//////////////////////////////////////////////// ////
mainfest.json file is the configuration file of the application, specifies the name of the application, icons, and other privileges.
name: // application name
appid: // application identification, when the new uni-app items, dcloud cloud distribution.
description: // application description
versionName: // version name
versionCode: // version number
transformPX: // whether to convert px projects to true, px converted to RPX.
///////////// ///////////////////////////////////////
package.json increase uni-app file extension points, You can implement a custom conditional compilation platform.
Configuring Usage:
{
"UNI-App": {
"scripts": {
"Custom-Platform": {
"title": "custom extension name",
"BROWSER": "", // to run a target browser
"env ":
},
"DEFINE": {
"the CUSTOM-CONST": // custom to true conditional compilation constants
}
}
}
}
}
//////////////////////// ///////////////////////////
Note vue.config.js this file, if packaged, then, is the need for this, oh, generally used for configuration webpack other compiler options
module.exports = function () {
publicPath: '/'
}
//////////////////////////////// /////////////////
use uni.scss document is to facilitate the overall style control applications.
SCSS need to install inside the plug-in hbuilderx; style but also in adding nodes lang = "scss" when used
//////////////////////////// ////////////////////
App.vue is uni-app main assembly, all the pages are switched in App.vue, a page entry file.
But he is not the page itself, can not write view element.
File actions include: calling application lifecycle functions, global style configuration, configure the global storage globalData.
Application Lifecycle only listen App.vue, the monitor invalid page.
Application lifecycle functions:
OnLaunch: Triggered when uni-app initialization is complete (Global triggers only once)
onShow: When the uni-app launch, or from the background into the foreground show
onHide: When the uni-app from the foreground into the background
onError: when uni- app given trigger
defined GlobalData disposed in the App.vue:
Export default {
GlobalData: {
text: 'text'
}
}
JS GlobalData operating in the following way: getApp () globalData.text = 'test ';.
when applying onLaunch , getApp object has not been acquired, you can temporarily use this $ scope.globalData get globalData..
global style, in App.vue, the css file references a common way: @import '../../common/common.css' ;
//////////////////////////////////////////////
main.js is uni-app file entry, the main role is to initialize vue instance, define a global component, such as the use of plug-ins required vuex.
First introduced vue library and App.vue, create an instance of vue, and mount vue instance.
Vue from Import 'VUE';
Import from the App './App';
Import pageHead './components/page-head.vue';// global reference from page-head assembly
Vue.config.productionTip = to false;
Vue.component ( 'page-head', pageHead ); // global registration page-head assembly, each page will be used as the component
App.mpType = 'App';
const = new new App Vue ({
... the App
})
App . $ mount (); // mount Vue instance
////////////////////////////////////// ////////////
Tip:
in hbuilderx, the input can be output directly to clog the console.log ();
input clogv direct output console.log ( ":" +);
2, page life cycle
onLoad () {} monitor page loads, the parameters passed to the data of the last page, the parameter type Object, a page for parameter passing.
onShow () {} page display monitor. Each time the page appears on the screen triggers, including return to the current page is exposed from the lower point of the page.
onReady () {} listening initial page rendering is complete, note that if the rendering speed, will enter the animation to complete before triggering the page.
onHide () {} monitor page hidden
onUnload () {} listener is uninstalled
onResize () {} listening window size change (App, micro-channel applet)
onPullDownRefresh () {} listening user pull-down operation, the general pull-down refresh
onReachBottom () {} page scroll in the end part of the event is not a scroll-view, common language drop-down next data
onBackPress () {} monitor page Back to return event = {from: backbutton, navigateBack }, backbutton indicate the source of the upper left corner is the back button, navigateBack sources indicate that uni.navigateBack
3, component life cycle
// same life cycle and vue of uni-app supported by the component.
beforeCreate () {} is invoked after the initialization instance
created () {} after the call instance created in the immediately
beforeMount () {} is called before loading begins
calling after mounted () {} Example mount up
beforeUpdate ( ) {} invoked when data updates
updated () {} Since the data change caused the virtual dom re-rendering and patching, after which invokes the hook
beforeDestroy () {} before calling instance destroyed
after destroyed () {} vue instance destroyed call after call, everything will vue de-binding indication instance, all event listeners will be removed and all their descendants will be destroyed.
4, page
getApp () function is used to obtain the current instance of the application, typically for acquiring globalData.
Example:
const getApp App = ();
the console.log (app.globalData);
getCurrentPages () function is used to obtain the current instance of the page stack, in the order given in the form of an array of the stack, the first element is a home, and finally an element of the current page.
getCurrentPages () can be obtained for all page objects, and in accordance with the array, can take specified page webview object.
Pages getCurrentPages = var ();
var = Page Pages [-pages.length. 1];
var = currentWebview getAppWebview Page $ ();.
consol.elog (currentWebview.id); // Get the current value id of webview.
Note:
navigateTo, RedirectTo only open non tabBar page.
switchTab only open tabBar page.
reLaunch can open any page.
5, page newsletter
. uni $ emit (eventName, object ); // event name, event trigger additional parameters carried triggered global custom events. Additional parameters are passed to the listener callback.
. uni $ emit ( 'update' , {msg: ' page to update'})
.. $ UNI ON (eventName, callback); // listen for global custom events, events can be triggered by $ emit uni, the callback function receives additional parameters for all incoming events triggered function of
UNI. $ ON ( 'Update', function (the Data) {
console.log ( 'listening to events from the update, carry parameters' + data.msg)
})
UNI. $ Once ( eventName, callback); // listen for global custom events. Events can be triggered by uni. $ Emit, but only trigger once, remove the listener after the first trigger.
uni. Once $ ( 'update', function (Data) {
the console.log ( 'monitor update event' + data.msg)
})
uni. $ OFF ([eventName, the callback]) to remove custom event listeners global
uni . $ OFF ( 'Update', function (the Data) {
})
Note: when using an event listener to be destroyed, for example, the page onLoad inside uni $ on registering a listener, onUnload inside uni $ off removed... Or one-time events, direct use of uni. $ Once listening.
6, network requests
// For the get method, converts the data to query string. For example {name: 'name', age : 18} converted result is name = name & Age = 18 is
// for post method and header [ 'content-type'] is application / json data will JSON serialization.
@ A method for post and header [ 'content-type'] data application / x-www-form- urlencoded , and converts the data query string.
Example:
uni.request ({
URL: '', // address of the interface,
Data: {// Parameters
name: 'name'
},
Method: 'the GET',
header: {
'Content-type': 'Applicaiton / JSON' // custom request header information
},
Success: (RES) => {
the console.log (RES, 'Success')
},
Fail: (ERR) => {
the console.log (ERR, 'Fail'
7, upload, download files, pictures class
// local resources uploaded to the developer server, the client initiates a post request, which content-type is multipart / form-data.
uni.chooseImage ({
COUNT:. 1,
SizeType: [ 'Original', 'Compressed'],
the sourceType: [ 'Album', 'Camera'],
Success: (chooseImageRes) => {
const = tempFilePaths chooseImageRes.tempFilePaths;
UNI. the uploadFile ({
URL: '', // server address
filePath: tempFilePaths [0],
name: 'File',
formData: {
'User': 'Test'
},
Success: (uploadFileRes) => {
Console.
uni.downloadFile ({
URL: '', // interface address
Success: (RES) => {
the console.log (RES)
}
})
There are many api to go to the official website Kane.
Recently with uni-app development, talk about his project to create a process and the process of playing a test demo version of Chou Chou
Editor or optional HBuilderX clatter the upper left corner there is a file, click the file, choose New File, and then select the item will pop up the following box, then select uni-app oh.
Fill in the project name, click Create, so far, this project will create success.
Then a new vue.config.json the project file, the contents can be configured as an inside.
In the title bar HBuilderX will see a release, click there will be a native App- package, select, will pop up the following box, select the red box mark, and click the button package.
Note: After the package is successful, there will be an address to download the application, but can only be downloaded 5 times Oh.
With specific reference to the document's official website: https://uniapp.dcloud.io/collocation/pages