微信小程序1

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": {}
}

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

<swiper
  indicator-dots="{{true}}" autoplay="{{true}}" circular="{{true}}"
  interval="{{3000}}" duration="{{300}}">
  <block wx:for="{{bannerlist}}" wx:key="item.bannerid">
    <swiper-item>
      <image src="{{ 'http://47.92.152.70/' + item.img }}" />
    </swiper-item>
  </block>
</swiper>

这里使用了封装的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 传入

<import src="md.wxml" />
<template is="md" data="{{...item}}"/>
<template is="md" data="{{...item1}}"/>
<template is="md" data="{{...item2}}"/>

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

5、小程序的生命周期

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

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())
  },

会打印出

6、生命周期钩子中请求数据

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

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

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 />