基础

新建项目

• 生命周期

  //app.js
  App({
    onPageNotFount(){
      console.log('page not fount');//页面不存在监听函数
    },
    onError:function(){
      console.log('error');//错误监听函数
    },
    onShow:function(){
      console.log('show');//监听小程序启动或切前台
    },
    onHide:function(){
      console.log('hide');//监听小程序切后台
    },
    onLaunch: function () {
      console.log('launch');//监听小程序初始化
    },
    globalData: {//是一个公共数据
      userInfo: null
    }
  })

• 入门（pages/index）
  • 　　构建页面结构

    <!--
      index.wxml
      wxml是框架涉及的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
    -->
    <view class="container">
     <text>Hello world</text>
     <view>{{message}}</view>
     <!-- 
        当用户点击该组件时会在该页面对应的Page中找到相应的时间处理函数
        bind：事情绑定不会阻止冒泡事件向上冒泡。
        catch：事情绑定可以阻止冒泡事件向上冒泡。只自身触发事件，不会传递到父视图。
      -->
     <text catchtap="click">点击文字</text>
    </view>

  • 　　美化页面

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
       128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    
    .container {
      background-color: pink;
    }

  • 　　数据处理

    //index.js
    //获取应用实例
    Page({
      data: {
        message:'好胖的兔子'
      },
    //index.js
    //获取应用实例
    Page({
      data: {
        message:'好胖的兔子'
      },
     click:function(){
        console.log('我被点击了');
      },
      onLoad: function (options) {//页面初始化,options为页面跳转所带来的的参数
       
      },
      onReady:function(){//页面渲染完成
    
      },
      onHide:function(){//页面显示
    
      },
      onUnload:function(){//页面关闭
    
      },
    
    })
    
      onLoad: function (options) {//页面初始化,options为页面跳转所带来的的参数
       
      },
      onReady:function(){//页面渲染完成
    
      },
      onHide:function(){//页面显示
    
      },
      onUnload:function(){//页面关闭
    
      },
    
    })

  • 效果展示

• 配置首页（app.json）

  {
    "pages": [
      "pages/index/index",
      "pages/logs/logs"
    ],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle": "black"
    },
    "sitemapLocation": "sitemap.json"
  }