微信小程序1

缺乏、安全感 2023-06-16 08:29 11阅读 0赞

**1、小程序的目录结构**

pages ---- 路由

index

index.js — 页面的js文件

index.json — 页面的配置文件

index.wxml — 页面的结构

index.wxss — 页面的样式

utils ---- 模块

app.js ---- 全局的js文件

app.json – 全局的配置文件

app.wxss – 全局的样式文件

project.config.json 项目配置文件

sitemap.json 小程序搜索的配置

**小程序的启动页面就是pages选项的第一个页面 ！！！**

{ 
      // 页面路径列表
      "pages": [ // 小程序的路由，一个页面就是一个路由
        "pages/index/index",
        "pages/logs/logs"
      ],
      // 全局的默认窗口表现
      "window": { 
        "backgroundTextStyle": "light", // 下拉页面后看到的微信的背景的字体样式
        "navigationBarBackgroundColor": "#fff", // 小程序头部背景
        "navigationBarTitleText": "WeChat", // 小程序的标题
        "navigationBarTextStyle": "white" // 标题的字体颜色 black / white
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

**2/ 页面的配置 — pages/page/page.json**

**每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项**

{ 
      "navigationBarBackgroundColor": "#f66",
      "navigationBarTitleText": "首页",
      "enablePullDownRefresh": true,
      "backgroundColor": "#00f",
      "usingComponents": { }
    }

![在这里插入图片描述][2019112520470380.png]

**3、创建小程序的页面以及配置底部选项卡**

1 编辑app.json全局配置文件中的 pages 选项，会自动生成各个页面

"pages": [
      "pages/home/home",
      "pages/kind/kind",
      "pages/cart/cart",
      "pages/user/user",
      "pages/index/index",
      "pages/logs/logs"
    ],

2 配置底部选项卡

"tabBar": { 
      "color": "#333",
      "selectedColor": "#f66",
      "backgroundColor": "#fff",
      "borderStyle": "black", // 上边框颜色
      "position": "top", // 顶部的选项卡，图标自动失效
      "list": [
        { 
          "text": "首页",
          "pagePath": "pages/home/home",
          "iconPath": "/resources/tabs/home.png", // 绝对路径
          "selectedIconPath": "/resources/tabs/home_active.png"
        },
        { 
          "text": "分类",
          "pagePath": "pages/kind/kind",
          "iconPath": "/resources/tabs/kind.png",
          "selectedIconPath": "/resources/tabs/kind_active.png"
        },
        { 
          "text": "购物车",
          "pagePath": "pages/cart/cart",
          "iconPath": "/resources/tabs/cart.png",
          "selectedIconPath": "/resources/tabs/cart_active.png"
        },
        { 
          "text": "我的",
          "pagePath": "pages/user/user",
          "iconPath": "/resources/tabs/user.png",
          "selectedIconPath": "/resources/tabs/user_active.png"
        }
      ]
    },

3 首页添加轮播图  
home/home.js

import request from './../../utils/request.js'
    
    data: { 
    	bannerlist: []
    }
    
    onLoad: function (options) { 
        request.fetch('/banner').then(data => { 
          console.log(data.data)
          this.setData({ 
            bannerlist: data.data
          })
        })
      },

home/home.json中注册组件

{ 
      "usingComponents": { 
        "prolist": "/components/prolist/prolist"
      }
    }

home/home.wxml

这里使用了封装的request  
utils/request.js

let baseUrl = "http://47.100.246.159";
    
    export default { 
      fetch(url, data, method) { 
        data = data || { }
        method = method || 'get'
        return new Promise(resolve => { 
          wx.request({ 
            url: baseUrl + url,
            data,
            method,
            success: (res) => { 
              resolve(res.data)
            }
          })
        })
      }
    }

4、引用

*  import  
    **我的附庸的附庸不是我的附庸**

home/md.wxml  
使用 name 属性，作为模板的名字。然后在内定义代码片段

<template name="md">
      <view>
        <text> { { index}}: { { msg}} </text>
        <text> Time: { { time}} </text>
      </view>
    </template>

home/ home.wxml  
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

*  include  
    **拷贝代码 但是不拷贝 模板以及wxs代码**

**5、小程序的生命周期**

## 5.1 小程序App ---- app.js ##

[https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html][https_developers.weixin.qq.com_miniprogram_dev_reference_api_App.html]

属性 类型 默认值 必填 说明

onLaunch function 否 生命周期回调——监听小程序初始化。

onShow function 否 生命周期回调——监听小程序启动或切前台。

onHide function 否 生命周期回调——监听小程序切后台。

onError function 否 错误监听函数。

onPageNotFound function 否 页面不存在监听函数。

其他 any 否 开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

**可以在小程序 的任何位置 通过 getApp() 获取到小程序全局唯一的 App 实例。**

**可以在app.js中设置全局的对象 来管理需要的状态**

// app.js
    globalData: { 
      userInfo: null,
      title: '小程序全局的实例'
    },
    state: { 
      test: '1'
    }
    
    // home.js
    let app = getApp()
    console.log(app.globalData.title)
    console.log(app.state.test)
    app.state.test = 2
    console.log(app.state.test)

## 5.2 页面 Page - 生命周期 ##

属性 类型 默认值 必填 说明

data Object 页面的初始数据

onLoad function 生命周期回调—监听页面加载 ----ajax请求

onShow function 生命周期回调—监听页面显示 ---- vue activated

onReady function 生命周期回调—监听页面初次渲染完成

onHide function 生命周期回调—监听页面隐藏 ---- vue deactivated

onUnload function 生命周期回调—监听页面卸载

onPullDownRefresh function 监听用户下拉动作 ----需要page.json中开启下拉刷新

onReachBottom function 页面上拉触底事件的处理函数

onShareAppMessage function 用户点击右上角转发

onPageScroll function 页面滚动触发事件的处理函数

onResize function 页面尺寸改变时触发，详见 响应显示区域变化

onTabItemTap function 当前是 tab 页时，点击 tab 时触发

其他 any 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

**getCurrentPages() 获取当前是哪一个页面**

/** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        console.log(getCurrentPages())
      },

会打印出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]  
**6、生命周期钩子中请求数据**

**小程序的数据请求，必须使用wx.request()函数，而且接口必须是https协议，并且小程序的安全域名必须得配置**

**但是在开发时可以忽略 请求域名的配置 详情 -> 本地设置 -> 不检验合法域名，一定要记住在项目上线时去掉它**

[https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html][https_developers.weixin.qq.com_miniprogram_dev_api_network_request_wx.request.html]

**7、列表组件**

1 创建组件 components/prolist/prolist

// prolist.wxml
    <view class="ul prolist">
      <view class="li item">
        <view class="itemimg">
        </view>
        <view class="iteminfo">
        </view>
      </view>
    </view>
    
    // prolist.wxss
    /* components/prolist/prolist.wxss */
    .prolist .item{ 
      display: flex;
      height: 100px;
      border-bottom: 1px solid #ccc;
    }
    
    .prolist .item .itemimg { 
      width: 90px;
      height: 90px;
      background: #f66;
      margin: 5px;
    }
    .prolist .item .iteminfo { 
      flex: 1;
    }

2 注册并且使用组件 — vue

// home.json
    { 
      "navigationBarTitleText": "首页",
      "usingComponents": { 
        "prolist": "/components/prolist/prolist"
      }
    }

3 使用组件

// home/home.wxml
    <prolist />

[2019112520470380.png]: https://img-blog.csdnimg.cn/2019112520470380.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_api_App.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125204051853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw==,size_16,color_FFFFFF,t_70
[https_developers.weixin.qq.com_miniprogram_dev_api_network_request_wx.request.html]: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html