This is my second article on getting started

Cease to struggle and you cease to live. “– Carlisle remember to like it first and check it out

remarks

Have you ever downloaded and installed wechat developer tools and found that many files were automatically created? Then a face meng, want to start and do not know where to change? Only see a pile of folders or file name suffixes do not understand, as to how to control, how to write, do not know how to start? It’s okay. This is going to show you how to type code. If you have not yet understood or installed wechat developer tools, please check out this article how to get started with wechat small program development (understand the tool article).

Quickly learn what files do

To get started quickly, we first need to know what each file is for, how to write it in order to modify the control page, etc. (The following is a personal experience, if you want to see the official description,Please click on me – Mini program documentation

Development tools throw a picture at you

  • 1. app.js
    • Used when a small program is started to trigger its inherent life cycle, the common automatic login or global initialization function is put inonLaunchLife cycle, andglobalDataIs to store globalData, a single page js read globalData writtengetApp().globalData

App({
  onLaunch() {
    // Show local storage capabilities
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    / / login
    wx.login({
      success: res= > {
        // Send res.code to the background to exchange openId, sessionKey, unionId}})},globalData: {
    userInfo: null}})Copy the code
  • 2. app.json
    • It is mainly used for global configuration, such as global title, navigation bar color, bottom navigation bar tabbar. Since the applet has four files per page, you can enter the name of the file you want to create to generate everything you need for the page, as shown in the figure below. For other configurations, go to global Configuration of wechat document

  • 3. pages
    • Each file in the Pages folder is a separate page, where the business logic or the content of the page we need to control is controlled and encoded
    • Each page consists of four files:
      • WXML: this is a place like H5 page tags, but the tags must be written according to wechat, such as view, image, etc., more details about the document tags
      • WXSS: this is a place like H5 page CSS storage, support most of the CSS all writing, I think the only difference is its unit is RPX, this unit can be adapted to different mobile phone screens, do not need to front-end students do REM or media queries to do adaptation, very convenient, more specific WXSS documentation
      • Js: This file is used to write business logic and some interactive logic functions like normal H5 files. It supports ES6 syntax and is very convenient to use. More details are supported in JS documentation
      • Json: this is a configuration file for the current page. For example, you can configure the title, pull down refresh, trigger, etc., the practical function configuration, more details in the configuration document
After reading the above introduction, you have a general idea of what each file is used for, so shall we beginCode travels~

Hands-on code

First on the renderings of the following figure, truthfully is the official demo, do not lose heart I will teach you how to achieve the code in detail

  • 1. How do we configure the header

    => Open the pages/index/index.json file,navigationBarTitleTextThe field is the title configuration,usingComponentsThe field is used by the import component, as shown below
{
  "navigationBarTitleText": "My first demo."."usingComponents": {}}Copy the code

  • 2. Control the content displayed on the page, such as pictures and text => Open the pages/index/index.wxml file. {{userinfo. nickName}} is a syntax.{{}}Is the fixed syntax (of course there are many grammar such as conditional syntaxwx:if="{{}}"For example, “userinfo.nickname” is a class name from index.js, and “class” is a class name from index.wxssFor more syntax, click on me, the code is as follows

Part of index. WXML

<view class="container">
  <view class="userinfo">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
Copy the code

Index. WXSS section

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.usermotto {
  margin-top: 200px;
}
Copy the code

Part of index.js

data: {
    motto: 'Hello World'.userInfo: {
          avatarUrl: 'https://devapicard.itop123.com/files/img/20201213/20201213141209123634220.png'}},Copy the code

If you want to jump to the second page, add bindTap =”bindViewTap” in the index. WXML file, where bindTap =”bindViewTap” NavigateTo,url is your second page file path, code as follows, more API documentation point is to view

bindViewTap() {
   wx.navigateTo({
     url: '.. /logs/logs'})}Copy the code

conclusion

Congratulations, when you finish reading this, you have a general understanding of how to use development tools, how to program and write code, and can start to become a small program. If you feel confused, it’s normal, as the saying goes: Practice makes perfect, the rest needs you to use a lot of time to operate and write, want to become a master must start to write, see will never solve your dream to become a master, come on ~ the next title to be determined, will write some commonly used components or APIS

As the saying goes: people praise, the hand has lingering fragrance. Please move a small hand, give a like in the walk ~