uni-app tutorial

uni-app: This is contains a lot of components, based vue cross-platform, applet plug-in framework

 

• After the new page, you need pages.json, configure first is the home page, portal page
• pages.json
  • Global style and exclusive style
• Common rendering
  • Cyclic output list v-for = "(item, index) in students"
  • Rendering conditions: v-if = "test" determines whether Render
  • Hidden elements :: hidden = "test" but does not display for rendering a situation likely to click on a button will appear to avoid Caton
• class support for syntax
  • Conditions font display: class = "[isRed 'red':? 'Blue']" .red bound in the form of colon css styles
  • Dynamic class style you want to use a colon is not required to bind static
  • In the form of dynamic binding style: style = "{fontSize: fontSize + 'px'}" is the brackets
  • Note dynamically modify the parameters of the time to add _self. Parameters can be modified
  • ! Color: # DD524D important; represent additional style
  • Id dynamic binding and processing method for a click event to be added directly to the colon static id = "{{ 'menu _' + index}}"
    • @click="menuClick" ="'menu_'+ index"
    • Use currentTarget.id more accurate when used to prevent the penetration of events
  • When the event when the finger leaves the touch screen is touchcancle, touchmove, touchend
  • Scroll scroll event
  • Binding events using the @
  • _self with this usage scenario for which different internal callback function (at this time if this is only represented by a function of outside thereof, not representative of the overall situation, we can not modify the variable)
• Parameter passing between pages
  • uni.navigateTo ({

url:"../test/test?name=test&age=18"

})

• The difference between get and post
  • get initiation request packet parameter in the url
  • post upload data using the parameter upload
• Select a photo from a local or take photos

 

 

Listener methods

• onLoad
• After onPullDownRefresh update to refresh the call to end stopPullDownRefresh
  • When the drop-down at the same time can also be displayed loding logo
• On to load more
  • onReachBottom lifecycle listeners
  •  
• UnionID and openID difference and how to apply, see P22
• Declare global variables add global.testData = "s" in script in the App.vue
• User login interface
• Packaging did not see on-line
• Public module common.js, when used in other documents to be import name from "../../name"
  • Another reference is defined in the prototype main.js file is defined by protoType. Vue.protoType.appName = "wlq" App.myType = "APP"
  • When using the referenced directly without the need to import this.appName
• class and type bind directly to see this document https://uniapp.dcloud.io/use?id=class-%e4%b8%8e-style-%e7%bb%91%e5%ae%9a
  • Conclusion is: class = "inside"
    • To use the dynamic attribute selection judgment {A: B} is selected from the group B noted that the true key bit pattern A class name of execution
    • List need not be determined simply using the plurality of attributes [] on the line framed
    • To ternary operator in []
    • [] {} Which can be nested dynamic and static binding simultaneously
    • Inside the content is not extending its variable "," if you use a style class "" indicates it is a class name
    • To dynamic binding dynamic properties:: class = "{active: isactive}" which is to support the dynamic pattern ternary operator
    • v-bind: class = "{}": binding a plurality of attributes
  • The Realization of modifications within style row
• Use the list rendering v-for = "(item, index) in list": key = index so as not to error
• Life Cycle function onReady () represents the life cycle of a function call when the page rendering is complete
• Node information
  • It is mainly used for collecting the node information acquired width and height of the page assembly

 

• Create components and using components
  • .vue file component contains its component name some specific things
  • Process
    • <Script> export default {name in the internal components: "myInput", also declared in the template

Dump failed to re-upload canceled

When used to put forward incorporated Components; import component for receiving an object

Dump failed to re-upload canceled

 

Variable transmission components between father and son: How to activate event subclass components of the dynamic changes of the parent page

• Parent component sub-assemblies passed
  • In sub-component event method inside this. $ Emit ( "mytest", val) in front of the method name, followed by parameters
  • When you use using the v-on components: mytest = "parent component event" to activate the sub-components of event-triggered events bound parent component
• Parent assembly operation subassembly
  • With $ ref

 

 

 

Haircut various front-end technology

 

• Primeval wxapp
  • But there are major changes based on VUE part of the syntax is the same
• uni-app
  • But differ on some details vue
• mpvue
  • Based vue while increasing the page monitor function
• vue most should first go over

 

 

• The above three parts are made of
  • Layout file xml template
  • css style file wxss
  • js file for how to write various logical Incident Response

 

 

• The rear end of the temporary use of Tencent's server,
  • The key is to define an interface, you can directly transfer data
  • Write your own interface and back-end server after server set up late to learn

 

 

 

 

Global Style

Note that ifdef write first introduced in the project App.vue

<style>

/ * #Ifdef MP-WEIXIN * /

/ * Global Styles * /

@import "./common/uni.css";

/* #endif */

</style>

Then then the corresponding file to be introduced in the following common

Dump failed to re-upload canceled

View uni.css file We found such a passage

@ Font-face {

font-family: uniicons;

font-weight: normal;

font-style: normal;

src: url('./static/uni.ttf') format('truetype');

}

Note that one of the src: it introduces a ttf file ,, in static below

Finally, we want to copy the file to the static ttf below. On the line