前端 -- 微信小程序快速入门

1、全局配置app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
//这里是新建页面
  "pages": [
    "pages/index/index",
    "pages/search/index",
    "pages/goods_detail/index",
    "pages/goods_list/index",
    "pages/category/index",   
    "pages/cart/index",
    "pages/pay/index",    
    "pages/logs/logs"  
  ],
  //这里是顶部标题
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
    
  },
  //这里是底部导航栏
  "tabBar": {
    "selectedColor": "#eb4450",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "assets/icons/home.png",
      "selectedIconPath": "assets/icons/home-o.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "assets/icons/category.png",
      "selectedIconPath": "assets/icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "购物车",
      "iconPath": "assets/icons/cart.png",
      "selectedIconPath": "assets/icons/cart-o.png"
    },
    {
      "pagePath": "pages/index/index",
      "text": "我的",
      "iconPath": "assets/icons/my.png",
      "selectedIconPath": "assets/icons/my-o.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

2、页面配置 page.json
这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。
开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

{
//这里是引用自定义组件
  "usingComponents": {
    "house-item": "/components/house",
    "search-input": "/components/searchinput"
  },
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "商品分类",
    "navigationBarTextStyle": "white"
}

3、常用逻辑

• 三元运算：<view hidden="{{flag ? true : false}}"> Hidden </view>
• 条件判断 wx:if <view wx:if="{{length > 5}}"> </view>
  在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
• 循环 wx:for
  项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
  下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名
  wx:key 用来提高数组渲染的性能

index.wxml

<view wx:for="{{array}}" wx:key="id">
 {{item.message}}
</view>

<view wx:for="{{array}}" wx:key="id" wx:for-item="v">
 {{v.message}}
</view>

index.js

Page({
  data: {
    array: [{
      id:0,
      message: 'hhh',
    }, {
        
      id:1,
      message: 'xxx'
    }]
  }
})

4、小程序事件绑定

• 点击事件

wxml

<input bindinput="handleInput" />

page.js

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
  }
})

事件传值 通过标签自定义属性的方式 和 value

<input bindinput="handleInput" data-id="100" />

 handleInput: function(e) {
   console.log(e.currentTarget.dataset.id)  //100
  }

绑定事件并阻止冒泡
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
      outer view
      <view id="middle" catchtap="handleTap2">
        middle view
        <view id="inner" bindtap="handleTap3">
          inner view
        </view>
      </view>
    </view>

5、样式

• 单位1rpx = 0.5px
• 导入样式文件：wxss中直接就支持，样式导入功能，使用@import语句可以导入外联样式表。

@import "common.wxss";
.middle-p {
  padding:15px;
}

• 内联样式

<view style="color:{{color}};" />

• 原生小程序不支持less，可在vscode中安装Easy less插件

6、常用组件

• view相当于div
• text文本标签
• image图片标签
• swpier轮播图
• navigator超链接标签

 <navigator url="/pages/cart/index" open-type="switchTab" class="gouwuche">
      <view class="iconfont icon-gouwuche"></view>
      <view class="text">购物车</view>
    </navigator>

open-type 跳转方式：默认navigate

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

• rich-text富文本
• button按钮
• icon图标
• radio单选框
• checkbox复选框

7、自定义组件

在组件js文件中

Component({

  properties: {
  //这里是期望得到数组类型的数据
    data:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

引用自定义组件
首先要在页面的 json 文件中进行引用声明。还要提供对应的组件名和组件路径

{
	// 引用声明
  "usingComponents": {
  	// 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
  }
}

在页面wxml中使用,可以单标签或者双标签

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

8、组件传参

• 父传子
  把数据 {{tabs}} 传递到 子组件的 tabItems 属性中

父组件.wxml

// 这里是引用子组件 
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
  内容-这里可以放插槽
</tabs>

父组件.js

data: {
    tabs:[
      {name:"小明"},
      {name:"晓东"}
    ]
  },

子组件.js

Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
    }
 },

子组件.wxml

<view wx:for="{{tabItems}}" wx:key="{{item}}">
     {{item.name}}
</view>

• 子传父

子组件.wxml

<view bindtap="handleItemActive"></view>

子组件.js

 methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
    }

父组件.wxml

<tabs bind:mytap="onMyTab" ></tab>

父组件.js

  onMyTab(e){
    console.log(e.detail);
  },

9、小程序生命周期

• 应用生命周期

页面生命周期

10、封装小程序请求库
新建request文件夹，创建request.js和url.js文件

在url.js文件中，创建根链接

export const BASE_URL = "https://www.linweiqin.cn/api/public/v1"

在request.js文件中

/* 
  1. 加遮罩
  2. 配置通用的Url
  3. 使用promise 进行改造
 */
import {  BASE_URL } from "./url.js"
export const request = (params) => {
  wx.showLoading({
    title: '正在加载中',
    mask: true
  })
  return new Promise(function (resolve, reject) {
    wx.request({
      ...params,
      url: BASE_URL + params.url,
      success: (res) => {
        resolve(res.data.message);
      },
      fail: (err) => {
        reject(err);
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  })

}

引用

import { request } from "../../request/request.js"

打开微信开发者工具的增强编译的功能，即可使用async 和 await

原本的数据请求:

 onLoad: function (options) {
    wx.request({
      url: 'https://www.linweiqin.cn/api/public/v1/home/swiperdata',
      success:(res)=>{
        this.setData({
          swiper_list:res.data.message
        })
        // console.log(res)
      }
    })

封装后的请求：

  getCategories: async function () {
    const categories_list = await request({
      url: "/categories"
    });
 this.setData({
      categories_list
    })
    console.log(categories_list);

11、小程序传参

• 通过data-*属性传值

<view bindtap="handleClick" data-params="123">点我传值</view>

接收

console.log(e.currentTarget.dataset.params)

• id传值

<view bindtap="handleClick"  id="123">点我传值</view>

接收

console.log(e.currentTarget.id)

• globalData传值
  在app.js中

 globalData: {
    userInfo: null，
    say:"666"
  }

接收

console.log(app.globalData.say)

• 页面传参

<navigator url="/pages/goods_detail/index?goods_id={{item.goods_id}}">页面传参</navigator>

• storage传参

wx.setStorageSync('aa',"哈哈哈")

接收

console.log(wx.getStorageSync("aa"))