微信小程序-相关笔记

├─pages						_____________页面文件夹
│  ├─index					_____________首页
│  │      index.js			_____________首页的逻辑文件
│  │      index.json		_____________首页的配置文件
│  │      index.wxml		_____________首页的结构文件
│  │      index.wxss		_____________首页的样式文件
│  │
│  └─logs					_____________日志 页面
│          logs.js
│          logs.json
│          logs.wxml
│          logs.wxss
│
└─utils						_____________第三方的工具js(可以删除的)
│       util.js
│  .eslintrc.js
│  app.js					_____________项目的全局入口文件
│  app.json					_____________全局配置文件
│  app.wxss					_____________全局样式文件
│  project.config.json		_____________项目的配置文件  如appid
│  project.private.config.json
│  sitemap.json				_____________微信索引配置文件

sitemap配置用来配置小程序及其页面是否允许被微信索引

app.json

快速新建目录及里面的相关文件

在app.json中的pages属性中，添加"pages/demo/demo"，保存之后，会在pages目录中自动创建demo目录，以及demo.wxml、demo.wxss、demo.js、demo.json

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/demo/demo"
],

1	<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

Page({
  tapName: function(event) {
    console.log(event)
  }
})

dataset

在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

封装 wx.request方法

utils/request.js：

//request.js
const baseUrl = 'https://www.winney07.cn:8080/'

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      method: method,
      data: data,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

const get = (url, data) => {
  return request(url, 'GET', data)
}

const post = (url, data) => {
  return request(url, 'POST', data)
}

export default {
  baseUrl,
  request,
  get,
  post
}

使用

import request from '../../utils/request.js'

// 请求接口，获取数据
async getData() {
    const swiperList = await request.get('shopping/swiper');
    const tabList = await request.get('shopping/good/tabList');
    const goodList = await request.get('shopping/good/getGoodList');
    this.setData({
      swiperList,
      tabList,
      goodList
    })
},

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
    this.getData();
},

父子组件之间传值

父组件：

1	<good-list goodsList="{{goodsList}}"></good-list>

子组件.js：

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

子组件.wxml：

<view class="good-list">
  <block
  wx:for="{{ goodsList }}"
  wx:key="index">
    <good-card class="good-item" i="{{index}}" data="{{item}}"></good-card>
  </block>
</view>

事件监听

传参

goods/category/index：

<van-grid-item 
    use-slot 
    class="grid-item" 
    data-groupid="{{item.groupId}}" 
    bindtap="toList">
    
    .....
    .....
    .....
</van-grid-item>

toList(event) {
    console.log('event');
    console.log(event.currentTarget.dataset);		// {groupid: "249480"}
    let groupid = event.currentTarget.dataset.groupid;
    wx.navigateTo({
      url: `/pages/goods/list/index?groupid=${groupid}`
    })
},

在元素中自定义的data-属性，在event.currentTarget.dataset中。

获取URL传来的参数：

goods/list/index.js：

onLoad(options) {
    console.log('options'); 
    console.log(options);      // {groupid: "249480"}
},

微信小游戏

微信小游戏账号注册教程

在微信开发者中，创建小游戏项目，进入项目后，界面是黑色的。

需要注册个测试号（这个测试号是针对小游戏的）

开发测试号
申请小程序测试号
在微信开发中创建小游戏项目时，选择”测试号“，进入项目，即可正常显示

微信公众平台用户信息相关接口调整公告

报错信息

微信小程序编译遇到 ReferenceError: regeneratorRuntime is not defined 解决办法

解析方法：

打包前，在js文件中加入

1	import regeneratorRuntime from "./runtime"

在地图上显示当前位置

在.json页面中进行配置permission

{

    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "permission": {
        "scope.userLocation": {
          "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
        }
    }
}

获取位置

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
    console.log('维度')
    console.log(latitude)
    console.log('经度')
    console.log(longitude)
  }
})

本地目录

云服务器目录

node命令使用之前

接口管理

接口文档

UI框架

开源项目

步骤

编译模式：

基础库

页面路径

结构目录