Small program is different from traditional Web App, HTML5, native App and wechat public number of a new form of application, released by the wechat team in January 2017, after nearly two years of development, small program is more and more mature, small program research and development is more and more attention. What is a applets? In Zhang’s own words:
Applet is a kind of application that can be used without downloading and installing. It realizes the dream of application “at your fingertips”. Users can open the application by scanning or searching it. It also embodies the concept of “use it and go”, so users don’t have to worry about installing too many apps. Applications will be everywhere, ready to use, but will not need to be installed or uninstalled.
And comparison of H5
Which ones are better suited for applets development
Applets development process
Apply for an account -> install development tools -> write code -> test -> upload version -> submit review -> pass review -> release online
Registration application mini procedure
Anyone can apply; Use a registered email address that has not been registered with small programs, public accounts, service numbers, etc
Registered Address:mp.weixin.qq.com/
Fill in the applets information and obtain the applets appId
Small program development tools
Used to write, compile small program code, small program preview, debugging, release
Actual development tools; More powerful, easier to write; You can view it in real time in the development tool
Download address:code.visualstudio.com/
Install plug-in:
Applets file introduction
The images folder
Lib folder
Weui. WXSS can be reused and used to introduce CSS styles
The pages folder
WXML is similar to HTML
WXSS is similar to CSS
Js variables, methods in each individual page
Json page configuration file
Utils folder
Util.js a reusable JS method
App.js Applet global related JS
Json applets configuration file
Related configuration of applets
Global configuration app.json
Page configuration page. Json
App.wxss Applet global APP style
Small program UI library -WEUI
Json tool project configuration file
WXSS
The unit RPX in the applet
RPX (Responsive Pixel) : ADAPTS to the screen width. Specify a screen width of 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels, then 750rpx = 375px = 750 physical pixels and 1rpx = 0.5px = 1 physical pixel.
Style import
The @import statement can be used to import an external style sheet, followed by the relative path of the external style sheet to be imported, using; Indicates the end of the statement.
WXML
List rendering WX :for
Example: On the HFGA page and my page, service modules are dynamically obtained from the background
Conditional render Wx :if
Example: The My page displays different content based on the authorization status
Use of templates
Template definition
<templatename="msgItem"><view><text> {{index}}: {{msg}} </text><text> Time: {{time}} </text></view></template>Copy the code
Template usage: declare the required template using the IS attribute, and pass in the data required by the template, for example:
<templateis="msgItem"data="{{item}}"/>Copy the code
Page({
data: {
item: {
index: 0.msg: 'this is a template'.time: '2016-09-15'}}})Copy the code
Example: I initiated, I approved, cc me, information query and other modules in the list page, details page, the same module, the same display data, the same style
Form form
Input Input box-type Attribute
Type =”text” Text input keyboard
Type =”number” Numeric input keyboard
Type =”digit” ID card input keyboard
Type =”idcard” Numeric keypad with decimal point
Input field – Common events
The bindinput function can return a string directly that will replace the contents of the input field.
Example: The event is used to match the company or judge the input data for the next operation
Bindfocus Is triggered when the input box is focused
Bindblur Triggered when an input box loses focus
input-placeholder
Placeholder input fields are space placeholders
Placeholder -style Specifies the style of the placeholder
Placeholder -class Specifies the style class for the placeholder
Picker selector -mode
Normal selector: mode = selector
Example: the choice of approver in business application
Multi-column selector: mode = multiSelector
Example: the selection of loan time and return time in the bus application
Time selector: mode = time
Date selector: mode = date
Example: Time selection in the annual leave application
Picker selector – Common properties
Range is available when range mode is selector or multiSelector
Range-key When range is an Object Array, range-key is used to specify the key value in the Object as the selector
Example: The approver in the business application receives an array, namely range, from the background; The user name, range-key, is displayed and selected
Radio radio
Example: the choice of leave times in the annual leave application
The checkbox multi-select
Example: selection of seal type in seal application
Button component – Basic properties
Size Size of the default button
Type Default button style type
Plain False whether the button is hollow and the background color is transparent
Disabled false Indicates whether to disable
Hover-class specifies the style class that the button presses. Hover -class=” None “, no click effect
Button component – Common methods
Form-type is used for the form component. Clicking on the form component triggers the Submit /reset events
Bindgetuserinfo When a user clicks this button, the user information is returned, and the detail data is the same as that returned by wx.getUserInfo
Bindgetphonenumber Callback to get the user’s mobile phonenumber
JS
Page (Object) constructor
The Page(Object) function registers a Page. Accepts an Object parameter that specifies the page’s initial data, lifecycle callbacks, event handlers, and so on.
Initial data for the page
<view>{{text}}</view><view>{{array[0].msg}}</view>Copy the code
OnLoad lifecycle callback – listens for page loads
OnShow lifecycle callback – Listen for page display
OnReady lifecycle callback – Listens for the page to complete its first rendering
OnHide lifecycle callback – Listen for page hiding
OnUnload Lifecycle callback – Listens for page unload
onLoad(options)
Triggered when the page loads. A page is called only once, and you can get the parameters in the onLoad argument to open the current page path.
Example: page A via jump link”www.baidu.com?a=5&b=12″Url a=5, b=12 to page B. Print options in the onLoad(options) method of page B. You can see that the data from page A and b have been transferred to page B
OnShow () triggered when the page is displayed/cut to the foreground – used when you need to constantly determine the page status and other information.
Example: It is not appropriate to use onLoad() function to judge whether authorization information is lost, user openId and other data are lost in HFGA and “my” pages (triggered when the page is loaded). A page is called only once), so use the onShow() function.
Page event handler
OnPullDownRefresh Listens for user pulldown actions
OnReachBottom Handler for the pull bottom event on the page
Example: I initiated, I approved, cc me, information query and other modules, the default display of 5 data, pull down triggered events to obtain more data, improve page performance
Share forwarding Event -onShareAppMessage(Object)
Monitor the behavior of users clicking the forward button in the page (button component open-type=”share”) or the “forward” button in the menu in the upper right corner, and customize the forwarding content. Note: Only if this event handler is defined will the forward button appear in the upper-right menu
User-defined forwarding content
Applets version
Preview, real machine debugging – development version
Use the developer tool to preview the applet, which helps developers check the applet’s true performance on mobile clients.
Click the preview button in the operation bar at the top of the developer tool, and the developer tool will automatically package the current project and upload the small program code to the wechat server. After success, a TWO-DIMENSIONAL code will be displayed on the interface. Use the current small program developer’s wechat scan code to see the real performance of the small program on the mobile phone client.
Experience version
Development builds Use developer tools to upload code to development builds. The development version only keeps each person’s latest copy of the uploaded code. Click Submit review to submit your code for review. The development version can be deleted without affecting the code of the online version and the version under review.
Only one piece of code can be under review for a version under review. After the audit results can be published online, or directly resubmit the audit, covering the original audit version.
Online version The version of the code used by all users of the online code, which is overwritten and updated after a new version of the code is released.
