<> effect
Cross end （APP, Various small programs ,H5） Development framework , Total 10 platforms
<> characteristic
1, Used vue grammar
2, Component mode of applet
3, adopt uni-app Unify all ends api
4, Compile the source code of each end
<> directory structure
1,package.json Configuration of the directory of page program
2,main.js Program entry
3,App.js Root component
4,static Static resource directory
index/index.vue home page
5,components Component storage directory （ Registration is not required ）
6,wxcomponnets Storage directory of wechat special components
<> Run compile environment preparation
<>H5
<>App
1, download app simulator
2, configure port
function - Run to phone or emulator -Android Simulator port settings
3, function
1. Turn on the simulator
2. function - Run to phone or emulator - Running project xxx reach xxx simulator
<> WeChat
1, Download and install wechat development tools
2, Wechat development tools - set up - security setting - Server port on
3,HBuilderX- function - Run to applet emulator - Run setup - Applet developer tool path
<>index.vue Page analysis
template Template ,script Business logic ,style style
<> Common components
1,view Block element
2,text In line elements
3,navigate Navigation
<> Conditional compilation
<> Common conditions
#ifdef APP-PLUS APP #ifdef MP-WEIXIN WeChat #ifdef H5 H5 Webpage
<> In the template
<!-- #ifdef APP-PLUS --> <!-- #endif -->
<> In style
/*#ifdef APP-PLUS */ /* #endif */
<> Configuration in progress
<!-- #ifdef APP-PLUS --> <!-- #endif --> Separate configuration “h5”：{} “App-plus”：{}
<>page.json
<>pages Page configuration
path：xxx/xxx route
style style （glovalStyle The value is the same ）
<>globalStyle Global configuration
1,“navigationBarTextStyle”: “black”, Navigation text color
2,“navigationBarTitleText”: “uni-app”, Navigation title
3,“navigationBarBackgroundColor”："#F8F8F8", Navigation background color
4,“backgroundColor”: “#F8F8F8” Page background color
<> Built in components
1,view block
2,tex text
3,selectable Text Changan optional
4,image picture
5,navigator Navigation
6,swioer slide
7,swiper-item slide - one page
<> Extension components
uni.request Network request
<>css
height：var(–status-bar-height) The height of the status bar
Technology
Daily Recommendation