api 接口文档

api.it120.cc/doc.html#/%…

wx.getUserProfile 获取用户信息

 // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })

wx.canIUse

wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false

打开微信小程序创建项目

配置小程序（app.json）

全局配置

根据官方文档配置小程序->全局配置复制到app.json

页面配置

app.json

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black",
    "onReachBottomDistance": 50
  },

tabBar

创建底部首页分类等 active

// app.json
  "pages": [
    "pages/index/index",
    "pages/logs/index",
    "pages/category/category",
    "pages/coupons/index",
    "pages/shop-cart/index",
    "pages/my/index"
  ],


  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#e64340",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/nav/home-off.png",
        "selectedIconPath": "images/nav/home-on.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/category/category",
        "iconPath": "images/nav/fl-off.png",
        "selectedIconPath": "images/nav/fl-on.png",
        "text": "分类"
      },
      {
        "pagePath": "pages/coupons/index",
        "iconPath": "images/nav/coupon-off.png",
        "selectedIconPath": "images/nav/coupon-on.png",
        "text": "优惠券"
      },
      {
        "pagePath": "pages/shop-cart/index",
        "iconPath": "images/nav/cart-off.png",
        "selectedIconPath": "images/nav/cart-on.png",
        "text": "购物车"
      },
      {
        "pagePath": "pages/my/index",
        "iconPath": "images/nav/my-off.png",
        "selectedIconPath": "images/nav/my-on.png",
        "text": "我的"
      }
    ]
  },

apifm-wxapi api接口

// config.js
module.exports = {
  version: '12.7.1',
  note: '步进器，剩余库存和购买数量一致时无法选择的bug', // 这个为版本描述，无需修改
  subDomain: 'tz', // liu123 此处改成你自己的专属域名。什么是专属域名？请看教程 https://www.it120.cc/help/qr6l4m.html
  merchantId: 951, // 商户ID，可在后台工厂设置-->商户信息查看
  sdkAppID: 1400450467, // 腾讯实时音视频应用编号，请看教程 https://www.it120.cc/help/nxoqsl.html
}
// app.js
const WXAPI = require('apifm-wxapi')
const CONFIG = require('config.js')
// onLaunch
  const subDomain = wx.getExtConfigSync().subDomain
    if (subDomain) {
      WXAPI.init(subDomain)
    } else {
      WXAPI.init(CONFIG.subDomain)
      WXAPI.setMerchantId(CONFIG.merchantId)
    }

miniprogram_npm

最开始项目没有依赖需要npm init 一路回车生成package.json 然后点击工具构建npm 生成miniprogram_npm

使用apifm-wxapi

const WXAPI = require('apifm-wxapi')
  onLoad: function (options) {
   this.categories()
  },
  async categories(){
    const res =  await WXAPI.goodsCategory()
    console.log(res);
    },

wx:for

在index.wxml中渲染使用

<view class="category-container">
  <view class="category-box">
    <view class="category-list" wx:for="{{categories}}" wx:key="id">
      <view class="category-column {{activeCategoryId == item.id ? 'type-item-on' : ''}}" bindtap="tabClick"
        data-id="{{item.id}}">
        <image mode="aspectFill" class="category-imgbox" src="{{item.icon}}"></image>
        <view class="category-title">{{item.name}}</view>
      </view>
    </view>
  </view>
</view>

wx:if wx:elif wx:else

<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<view wx:else> 请使用1.4.4及以上版本基础库 </view>

getApp()

获取到小程序全局唯一的 App 实例。可以调用全局的变量或者方法

// page 的上方也就是外部
const APP = getApp()
console.log(app.方法||变量)

获取系统信息 getSystemInfo

可以用来判断机型适配哦 developers.weixin.qq.com/miniprogram…

Object wx.getMenuButtonBoundingClientRect()

获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。

// ---------------检测navbar高度
    let menuButtonObject = wx.getMenuButtonBoundingClientRect();
    console.log("小程序胶囊信息",menuButtonObject)
    wx.getSystemInfo({
      success: res => {
        let statusBarHeight = res.statusBarHeight,
          navTop = menuButtonObject.top,//胶囊按钮与顶部的距离
          navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight)*2;//导航高度
        this.globalData.navHeight = navHeight;
        this.globalData.navTop = navTop;
        this.globalData.windowHeight = res.windowHeight;
        this.globalData.menuButtonObject = menuButtonObject;
        console.log("navHeight",navHeight);
      },
      fail(err) {
        console.log(err);
      }
    })

setData

改变初始值data setData

 that.setData({
   goodsRecommend: res.data
  })

页面级的生命周期

// pages/coupons/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 接口
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

组件通讯

创建组件

创建文件夹 components/my-test 并且在json里面设置"component": true, 代表自身是组件

需要引入的页面需要在该文件下的json 引入组件

{
  "usingComponents": {
    "my-test":"/components/my-test/index"
  }
}

index.wxml

父传子

<my-test list="{{list}}"></my-test> 在组件中my-test/index.js 中使用Component properties定义类型

const App = getApp();

Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的对外属性，是属性名到属性设置的映射表
   */
  properties: {
    list: Array,    
  },

  /**
   * 组件的内部数据，和 properties 一同用于组件的模板渲染
   */
  data: {
    isClose: true
  },
  // 组件数据字段监听器，用于监听 properties 和 data 的变化
  observers: {

  },
  lifetimes: {
    attached: function () {
      this.setData({
        
      })
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

在my-test/index.wxml中使用接收值

<text>我是组件</text>
<view wx:for="{{list}}" wx:key="id">
{{item.name}}
{{item.icon}}
</view>

子传父

子组件中添加添加事件 bindtap="addCount"

<text>我是组件</text>
<view wx:for="{{list}}" wx:key="id">
{{item.name}}
{{item.icon}}
<button type="primary" bindtap="addCount">+1</button>
</view>

在组件中的index.js data中创建变量

  data: {
    isClose: true,
    count:1
  },

triggerEvent

  methods: {
    addCount() {
      this.setData({
        count: this.data.count + 1
      })
      this.triggerEvent('sync', {value: this.data.count})
    }
  }

父组件中使用

<my-test list="{{list}}" bind:sync="syncCount"></my-test>

syncCount(e) {
      console.log('syncCount',e.detail.value)
    },

插槽

什么是插槽

子组件通过挖坑
父组件通过组件标签中间的内容来填坑

单个插槽 slot

<my-test list="{{list}}" bind:sync="syncCount">
    <text>我是由父组件传给子组件的插槽slot</text>
</my-test>

my-test wxml中直接在需要的地方使用<slot></slot>

多个插槽

developers.weixin.qq.com/miniprogram… 在小程序的自定义组件中，需要使用多插槽时，可以在组件的 .js 文件中

multipleSlots: true // 在组件定义时的选项中启用多 slot 支持

代码如下（示例）：

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },
  )}

<view>
    <my-test list="{{list}}" bind:sync="syncCount">
        <text>我是由父组件传给子组件的插槽slot</text>
        <text slot="name">name</text>
        <text slot="age">age</text>
    </my-test>
</view>

// my-test
<slot></slot>
<view wx:for="{{list}}" wx:key="id">
    {{item.name}}
    {{item.icon}}
</view>
<slot name="name"></slot>
<button type="primary" bindtap="addCount">子传父+1</button>
<slot name="age"></slot>

wx.showLoading

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 developers.weixin.qq.com/miniprogram…

  wx.showLoading({
      "mask": true
    })

微信小程序个人笔记