微信小程序开发指南_微信小程序代码大全

目录结构

├─ config/ # 配置目录
│ ├─ index.js # 存储配置信息
├─ libs/ # 工具方法库
│ ├─ utils.js # 解析字符串的工具方法
├── wechat/ # 核心功能库
│ ├─ auth.js # 验证服务器和回复用户消息功能
│ ├─ reply.js # 处理返回消息功能
│ ├─ template.js # 回复消息模板文件
│ ├─ wechat.js # 类 wechat
├── index.js # 入口启动文件
├── package.json # 配置文件
1
2
3
4
5
6
7
8
9
10
11

一、赋值

this.setData({ show: true });
1

二、顶部标题栏（隐藏）

{
  "window":{"navigationStyle":"custom"}
}
1
2
3

三、跳转

wx.navigateTo({
 url: '/pages/index/index'
})
1
2
3

四、缓存

1.缓存获取：

wx.getStorageSync('UserData')
1

2.存入缓存：

wx.setStorageSync('token', data)
1

2.清空缓存：

 wx.clearStorageSync()
1

五、接口

utils文件下api.js

let host = "后端接口地址"

let api = {
  byWeappCode: `${host}功能接口路径`,
}
module.exports = api
1
2
3
4
5
6

页面导入

import api from './utils/api'
1

① GET请求

let param = {
  API_URL: api.（接口）+this.id,
  method: "GET",
};
1
2
3
4

② POST请求

let data = {this.id}
let param = {
 data,
 API_URL: api.（接口）,
 method: "POST",
};
1
2
3
4
5
6

示例请求

// 示例请求
let param = {
  API_URL: api.byWeappCode,  // 根据接口路径构建完整 URL
  method: "POST",  // 或 "GET"
  data: {}  // POST 请求时需要传递的数据对象
};

getData.result(param).then((res) => {
  wx.hideLoading();  // 隐藏加载提示
  if (res.statusCode == 200) {
    // 处理成功响应
  } else {
    // 处理其他响应
  }
}).catch((error) => {
  wx.hideLoading();  // 隐藏加载提示
  // 处理请求错误
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

六、遍历列表，事件处理函数中获取当前项的信息

<!-- 外层列表循环 -->
<view wx:for="{{列表}}" wx:key="item">
  <!-- 绑定点击事件 -->
  <view bindtap="事件名">
    <!-- 显示外层列表项的 id 和 name -->
    {{item.id}}{{item.name}}
    <!-- 内层列表循环 -->
    <view wx:for="{{item.arr2}}" wx:for-item="items" wx:key="items">
      <!-- 显示内层列表项的 title -->
      <view>{{items.title}}</view>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13

事件名: function(event){
  console.log(event.currentTarget.dataset.item.id);
}
1
2
3

七、定位

//app.json中
{
 // 配置用户权限申请说明
 "permission": { 
 // 申请获取用户位置信息的权限
  "scope.userLocation": {
   "desc": "你的位置信息将用于小程序位置接口的效果展示" // 描述申请此权限的用途
  }
 },
 // 配置需要获取的私有信息权限
 "requiredPrivateInfos": [
  "getLocation", // 获取用户位置信息的权限
  "onLocationChange", // 监听用户位置变化的权限
  "startLocationUpdateBackground" // 在后台启动位置更新的权限
 ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法案例①

//位置坐标
shouLocation() {
 let that = this; // 保存当前上下文的引用
 wx.getLocation({// 调用 wx.getLocation 获取当前地理位置
  type: 'wgs84', // 返回 gps 坐标，默认为 'wgs84'
  success(res) {// 成功获取位置信息
   const latitude = res.latitude; // 获取纬度
   const longitude = res.longitude; // 获取经度
   
   that.setData({
    'form.location': '{"lat":' + latitude + ',"lng":' + longitude + '}', // 设置位置 JSON 字符串
    location: '已获取' // 设置位置状态
   });// 更新页面数据

   // 显示通知提示用户位置获取成功
   Notify({
    type: 'primary', // 通知类型
    message: '已获取成功', // 通知消息
    duration: 700, // 通知显示时长，单位毫秒
   });
  },
  fail(error) {// 获取位置失败时的处理
   console.log('获取位置信息失败', error);
   Notify({
    type: 'danger', // 通知类型
    message: '获取位置信息失败', // 通知消息
    duration: 700, // 通知显示时长，单位毫秒
   });
  }
 });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

方法案例②

builtInSearch({ code, name }) {
 return new Promise((resolve, reject) => {
  // 获取用户的当前设置
  wx.getSetting({
   success: (res) => {
    // 检查用户是否拒绝了指定的权限
    if (res.authSetting[code] === false) {
     // 显示一个提示框，告知用户权限被拒绝，并引导用户前往设置页面开启权限
     wx.showModal({
      title: `获取${name}失败`, // 提示框标题
      content: `获取${name}失败，请在【右上角】-小程序【设置】项中，将【${name}】开启。`, // 提示框内容
      confirmText: '去设置', // 确认按钮文字
      confirmColor: '#FA550F', // 确认按钮颜色
      cancelText: '取消', // 取消按钮文字
      cancelColor: '#000000', // 取消按钮颜色
       success(res) {
        if (res.confirm) {
         // 用户点击了确认按钮，打开设置页面
         wx.openSetting({
          success(settingRes) {
           // 检查用户是否在设置页面开启了权限
          if (settingRes.authSetting[code] === true) {
           resolve(); // 权限开启，resolve promise
          } else {
           console.warn('用户未打开权限', name, code); // 权限未开启，记录警告信息
           reject(); // 权限未开启，reject promise
          }
         },
        });
       } else {
        reject(); // 用户取消操作，reject promise
       }
      },
      fail() {
       reject(); // 提示框调用失败，reject promise
      },
     });
    } else {
     resolve(); // 用户已授权，resolve promise
    }
   },
   fail() {
    reject(); // 获取设置失败，reject promise
   },
  });
 });
},

onSearchAddress() {
 // 调用 builtInSearch 方法检查和获取用户的地址位置权限
 this.builtInSearch({ code: 'scope.userLocation', name: '地址位置' }).then(() => {
  // 用户已授权，调用 wx.chooseLocation 选择地址
  wx.chooseLocation({
   success: (res) => {
    console.log(res); // 打印选择的地址信息
    if (res.name) {
     // 如果选择的地址有名称，触发 addressParse 事件
     this.triggerEvent('addressParse', {
      address: res.address, // 选择的地址
      name: res.name, // 选择的地点名称
      latitude: res.latitude, // 选择的地点纬度
      longitude: res.longitude, // 选择的地点经度
     });
    } else {
     // 地址为空，显示提示
     console.log('地点为空，请重新选择');
    }
   },
   fail: function (res) {
    console.warn(`wx.chooseLocation fail: ${JSON.stringify(res)}`); // 打印错误信息
    if (res.errMsg !== 'chooseLocation:fail cancel') {
     // 选择地点失败且不是用户取消操作，显示提示
     console.log('地点错误，请重新选择');
    }
   },
  });
 });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

八、静默登录

// app.js
import api from './utils/api' // 导入接口配置文件

App({
 onLaunch() {
  wx.login({// 调用 wx.login 接口进行登录
   success: res => {
    console.log(res.code); // 登录成功，打印返回的 code
    // 发送 code 到后台换取 openId, sessionKey, unionId
    wx.request({
     url: api.byWeappCode, // 后端接口地址
     data: {
      code: res.code // 登录返回的 code
     },
     method: 'POST', // 请求方法为 POST
     success: (response) => {// 请求成功，打印返回的响应数据
      console.log(response);
      wx.setStorageSync('token', response.data.access_token);// 将返回的 access_token 存入缓存
     },
     fail: (err) => {
      console.log('请退出重新登录');// 请求失败，打印错误信息
     }
    });
   }
  });
 },
 globalData: {
  userInfo: null // 全局数据对象，存储用户信息
 }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

九、tabBar

{
 "tabBar": {
  "custom": true, // 是否自定义 tabBar
  "color": "#666666", // 未选中时的字体颜色
  "selectedColor": "#FF5F15", // 选中时的字体颜色
  "backgroundColor": "#ffffff", // tabBar 背景色
  "borderStyle": "black", // tabBar 上边框的颜色，仅支持 black/white
  "list": [
   {
    "pagePath": "pages/home/home", // 对应页面的路径
    "text": "首页" // 显示在 tabBar 上的文字
   },
   {
    "pagePath": "pages/goods/category/index", // 对应页面的路径
    "text": "分类" // 显示在 tabBar 上的文字
   },
   {
    "pagePath": "pages/cart/index", // 对应页面的路径
    "text": "购物车" // 显示在 tabBar 上的文字
   },
   {
    "pagePath": "pages/usercenter/index", // 对应页面的路径
    "text": "我的" // 显示在 tabBar 上的文字
   }
  ]
 },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

注意事项：

1.配置文件位置:
 tabBar 配置必须写在 app.json 文件中，不支持动态配置。
2.tabBar 项数量:
 最少配置 2 项，最多配置 5 项。如果超过 5 项，会被微信小程序框架限制。
3.路径配置:
 pagePath 必须是小程序内的页面路径，并且这些页面必须在 app.json 中的 pages 数组中声明。
4.图标配置:
 可以配置每个 tabBar 项的图标（icon），通过 iconPath 和 selectedIconPath 来设置未选中和选中状态的图标。
 图标文件大小不超过 40KB，建议使用尺寸为 81px * 81px，图片格式仅支持 PNG。