微信小程序_基础

微信小程序主体部分由三个文件组成,必须放在更目录下

app.js 主要职责是存放一些公共业务逻辑,或者监听小程序声明周期等操作.

1. App()必须在app.js中注册
2. 在定义App()函数中调用getApp(),可直接使用this.
3. 不能在onLaunch中条用getCurrentPage().页面还没有渲染出来
4. 不用私自通过getApp()调用钩子函数
   • App.prototype.getCurrentPage() 获取当前页面的实例.
   • getApp()获取小程序的实例(任何页面都可以)

 var appInstance = getApp() 

    App({
        onLunch: function() {
          // 在启动时候初始化
        },
        onShow: function() {
          // 页面渲染时
        },
        onHide: function() {
          // 页面隐藏式
        }
     })

app.json 设置界面组成,公共窗口展现,底部tabbar,超时时间等.

    {
        "pages": [
            "pages/index/index",
            "pages/logs/index"
            ],
         "window": {
            "navigationBarTitleText": "demo"
         },
         "tabBar": {
            "list": [
                {
                    "pagePath": "pages/index/index",
                "text": "首页",
                },
                {
                    "pagePath": "pages/logs/index",
                "text": "日志"
                }
            ]
         },
         "networkTimeout": {
            "request": 10000,
            "downloadFile": 10000
         },
        "debug": true
    }

app.wxss 配置公共样式 ,定义在app.wxss中的样式为全局样式,服务于每一个页面

    .container {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
    }

Page

一个框架页面有四个文件组成

index.json 设置window 相关的配置<页面窗口表现.navigationBar标题.背景.颜色.是否允许下拉等>

{
    "window": {
        // 导航栏背景颜色
       "navigationBarBackgroundColor": "#ffffff",
        // 导航栏标题颜色，仅支持 black/white
        "navigationBarTextStyle": "black",
        // 导航栏标题文字内容
        "navigationBarTitleText": "小程序",
        // 窗口的背景色
        "backgroundColor": "#eeeeee",
        // 下拉刷新小点颜色
        "backgroundTextStyle": "light",
        // 是否可见下拉刷新
        "enablePullDownRefresh": false
}

事件

• bindtap 会冒泡
• catchtap 不会冒泡

跳转

• wx.redirectTo 重新定向
• wx.navigateTo 保留当前页面，跳到内部页面
• switchTab 有tapBar情况下只能用switchTab

遍历

property: 类似于字典中的key, 静态遍 历不需要wx:key

 <swiper-item wx:for="{{imgs}}" wx:key="property">
    <image class="img" src="{{item}}"></image>
  </swiper-item>

倒入测试数据

  require('../../data/data.js')
   onLoad: function (){
        this.setData({
            lists: list
        })
    }

自定义组件

组件只包涵 wxml与wxss

// 组件模块 name="tem"
<template name="tem">
    <view class="list-container">
      <view class="list-left">
        <text>{{title}}</text> 
          <image src="{{icon}}"></image>  
      </view>
      <view class="list-right">
        <text>{{hand}}</text>
        <text class="describle">{{describle}}</text>
      </view>
    </view>
</template>

    
/* 引入组件样式 */
@import "children/children.wxss"
// 引入模块 is="tem"（注意闭合“/”）
<import src="children/children.wxml"/>
<block wx:for="{{lists}}">
  <view>
     <template is="tem" data="{{...item}}"></template> 
  </view>
</block>

数据请求与ajax类似

 wx.request({
      url: 'http://web.juhe.cn:8080/environment/air/cityair',
      data: {
        city: 'guangzhou',
        key: 'a1219b6e73b932cbae0ff7fbb56eda1'
      },
      method: 'GET', 
      success: (res) => {
        console.log(res)
      }
    })

小程序api