uni app zero-based projects to combat white -1

uni-app is a front-end development framework using vue.js cross-platform applications.
Vue.js developers by writing the code, uni-app to compile to multiple platforms Ios, android, small micro-channel programs to ensure their proper and achieve excellent experience.
Uni-app inherited from vue.js, provides a complete vue.js development experience.

uni-app component specifications and api micro channels extend substantially the same applet.
There are certain vue.js small and micro-channel application development experience developers can quickly get started uni-app, developed app is compatible with the many-fold.

uni-app provides conditional compilation optimization
pages.json: routing configuration page, navigation bar, tab pages and other types of information.

manifest.json: configure the application name, appid, Logo, version
app.vue application configuration, as well as to configure the global style app lifecycle listener applications.

main.js: vue initialization file entry

static directory: storage applications to reference a static resource
pages directory: business page file storage directory
components directory: Component file storage directory

uni-app page style and layout
IMPORTANT
Please delete the global style app.vue in, view {display: flex;}
use flex to flex when the need.

Dimensions
uni-app frame length units currently only supports px% and, different from the conventional web page, px is a unit relative to the reference width, has a mobile terminal adapted to screen, the principle is similar rem.

reference width uni-app for 750px
developers need only follow px value to the draft design styles, the style of the frame design draft 1px 1px conversion formula is as follows:

reference width uni-app for 750px
developers need only to determine the value of px frame in accordance with the design style draft.

Style introducing
the @import statement imports external style sheets, @ import relative path followed by the need to import external style sheets, and indicates the end of a sentence.

<style>
 @import "../../common/uni.css";
 .uni-card {
  box-shadow: none;
 }
</style>

Inline styles
upper frame assembly supports style, class attributes to control the style of the component

style:静态的样式统一写到class中，style接收动态的样式，在运行解析，请尽量避免将静态样式写进style中，以免影响渲染速度。
<view style="color:{{color}};"/>

class:用于指定样式规则，其属性值是样式规则中类选择器名的集合，样式类名不需要带上，样式类名之间用空格分隔。

<view class="normal_view"/>

Selector
Currently supported selectors are:

.class .intro 选择所有拥有 class="intro" 的组件
#id #firstname 选择拥有 id="firstname" 的组件
element view 选择所有view 组件
element, element view, checkbox 选择所有文档的view 组件和所有的checkbox 组件

::after view::after在view组件后边插入内容，仅微信小程序和5+app生效
::before view::before在view组件前边插入内容，仅微信小程序和5+app生效

The global style and partial style
definitions in the style of app.vue global style applied to each page. Vue styles defined in the file directory pages is a partial style acts only in the corresponding page, and will cover the same app.vue selector.

Note:
app.vue can import outreach styles by @import statement, the same effect on every page.

flex layout
to support cross-platform framework is recommended to use flex layout

important

Please delete the global style app.vue

view{display:flex;}
在需要flex的时候使用flex即可

Dimensions
uni-app is currently supporting frame unit of length and px%, with conventional weeb different pages, px is a unit with respect to the reference width, has a mobile terminal adapted to screen, the principle is similar rem.

Reference width uni-app is 750px.

.content {
 flex: 1;
 justify-content: center;
 align-items: center;
}
.title {
 font-size: 36px;
 color: #8f8f94;
}

pages.json
pages.json file is used for uni-app configured globally, the decision of the page file path, show window, set up a multi-tab and so on.
pages.json configuration item list

globalStyle Object No Set the default page of window performance
pages Object Array is set Page path and window performance
tabBar object No performance settings tab at the bottom of
condition Object No startup mode configuration

"globalStyle": {
"navigationBarTextStyle":"white",

globalStyle
status bar settings of the application, a navigation bar, the title, the window background color and the like.

navigationBarBackgroundColor
导航栏背景颜色

navigationBarTextStyle
导航栏标题颜色

navigationBarTitleText 
导航栏标题文字内容

navigationStyle
导航栏样式

backgroundColor
窗口的背景色

navigationStyle only take effect in pages.json-> globalStyle in, turned custom, all the windows had no navigation bar.

pages
to receive an array, which is specified by the application pages.
Information on behalf of each of the corresponding page, new applications / reduce page, need to be modified Pages array.

weui framework
weui ui framework is a set of small programs, called ui framework is a set of interface design, with components, we can use it to piece together a content-rich small program, and with a framework Ui, you can make our small program becomes more beautiful.

Experience weui applet
weui is the official micro-channel design team designed a micro-channel with native visual experience on a consistent basis style library, search weui applet or scan in mobile micro-letter, you can experience in the mobile phone.

We can also download the source code weui applet view it in developer tools in particular is how to do.

After downloading extracting archive you can see weui-wxss-master folder, click the Developer Tools toolbar and choose Import Project menu item, then you can view the source code to weui in developer tools.

Project name, you can name your own.
Drop-down selection appid.

Small task: Why is the file in the dist weui-wxss-master folder, rather than weui-wxss-master?

Weui in conjunction with the actual experience of developer tools and weui simulator source code, find weui basic components in the article, flex, grid, panel, the components in the form of button, list with the page file corresponding pages folder, wxml and view the page file, wxss the code to see how they are written.

Small tasks, click the Developer Tools preview column, using a mobile phone micro-channel two-dimensional code scanning experience, take a look at the official weui small program any different.

weui interface, although very simple, but behind it contains a lot of the design concept, which we can read.

weui use

pages
image
style
weui.wxss
app.js
app.json
app.wxss

The second line uses Developer Tools applet app.wxss open the template file add the following code:

@import 'style/weui.wxss';

flex layout
how to add text, links, images and other elements and components to wxml file, we want to give them a more structured layout elements and components, no longer a simple up and down relationship, there are about relationships, and about the relationship between the upper and lower nested .

Layout is also a style, are also aspects of knowledge css oh.
Layout applet uses a layout flex, flex elastic layout, to provide maximum flexibility for box model.

<view class="flex-box">
 <view class="list-item">Python</view>
 <view class="list-item">小程序</view>
 <view class="list-item">网站建设</view>
</view>

.list-item {
 background-color: #82c2f7;
 height: 100px;
 text-align: center;
 border: 1px solid #bdd2f8;
}

Let component becomes about relationship

.flex-box {
  display: flex;
}

tabBar
If more than one application tab application can be configured by the performance of the specified column tabBar tab, and the corresponding page tab to switch the display.

When the setting position is a top, it will not display icon

Property Description:
name String Application name
appid String
application identifier

description
Application Description
versionName version Name
versionCode version number

app-plus
unique profile

quickapp
fast application-specific configuration
mp-weixion
micro letter applet-specific configuration
mp-baidu
Baidu unique configuration
mp-alipay
Alipay small program-specific configuration

Configuration file manifest.json

mp-weixin
Attribute Type Description
----
If the contents of this number do not get bit places (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.

---

Please thumbs up! Because you agree / encouragement is the greatest power of my writing!

Welcome attention of niche t- Jane books!

This is a quality, attitude blog