小程序基础操作（实际操作）

大大大石头
498 阅读7分钟

笔记来源：拉勾教育 - 大前端就业集训营

文章内容：学习过程中的笔记、感悟、和经验

提示：项目实战类文章资源无法上传，仅供参考

小项目尝试开发

预览 / 真机调试

预览：可以在手机端模拟打开小程序查看效果

真机调试：在手机端打开小程序后，当修改代码后会自动同步

注意：预览时会自动上传代码，最大2M，大于2M会报错

数据接口

申请接口

  • 后端工程师 - Express开发
  • 模拟接口（Mock -API） - 例如：rap2等
  • 第三方接口 - 例如：和风天气（本案例使用）

和风天气

截屏2021-08-18 17.00.15

  1. 注册账号
  2. 创建应用：和风天气控制台 => 应用管理 => 创建应用
  3. 申请密钥：应用创建后点击添加数据KEY
    • key是调用接口的凭证
  4. 开发集成
    • 请求接口的语法
    • 返回数据的示例

具体API可参考和风天气开发文档

调试接口

使用接口调试工具进行需要使用的接口调试，课程使用的是insomnia，我这里使用ApiPost进行调试，国产软件，语言比较友好

调用接口

小程序中调用接口使用wx.request()云API

小技巧：全局配置中pages第一个页面路径就是默认加载路径

wx.request({
  // 请求地址
  url: 'https://devapi.qweather.com/v7/weather/3d',
  // 请求参数
  data: {
    location: '101010100',
    key: '75174c6785044e3d91b7e1bc457ae702'
  },
  // 请求头
  header: {
    // 默认返回JSON
    'content-type': 'application/json' // 默认值
  },
  // 请求成功
  success (res) {
    console.log(res.data)
  }
})

报错内容：xxxx不在以下 request 合法域名列表中，不解决无法获取数据

  • 解决方案：
    • 开发阶段：不校验合法域名
      • 微信开发者工具 => 详情 => 本地设置 => 不校验合法域名
    • 上线阶段：绑定请求接口域名
      • 小程序管理后台 => 开发设置 => 服务器域名 =>添加合法域名

单独封装请求

// 接口地址
const BASE_URL = "https://devapi.qweather.com/v7"
// 应用 key
const KEY = "687e517f06684448a9f4695721414a07"

/**
 * API 请求函数
 * 参数：url地址，请求方式，请求参数
 */
const request = (url, method, data) => {
  // 请求参数上添加我的和风天气KEY
  data.key = '75174c6785044e3d91b7e1bc457ae702'
  // 返回一个Promise包装后的返回数据
  return new Promise((resovle, reject) => {
    // 调用小程序API获取数据
    wx.request({
      // url地址,使用通用请求地址加上接口独有地址
      url: BASE_URL + url,
      // 请求方式
      method,
      // 请求参数
      data,
      // 请求头
      header: {
        // 默认返回json数据
        'content-type': 'application/json'
      },
      // 请求成功触发promise请求成功方法，传递参数
      success (res) {
        resovle(res.data)
      },
      // 请求失败触发promise请求失败方法，传递错误
      fail (err) {
        reject(err)
      }
    })
  })
}

// 导出
module.exports = {
  // 获取三天天气方法，参数：请求参数
  threeDays: (data) => {
    // 调用上面封装的方法，传入请求地址、请求方法、请求参数
    return request('/weather/3d', 'get', data)
  }
}

页面中引入API接口

// pages/qweather/qweather.js
// 获取和风天气封装接口
const HFAPI = require('../../utils/api')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 当前经纬度
    location: '',
    // 三天天气数据
    threeDays: [1,2,3]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 绑定一下this，方便后面调用
    const that = this
    // 小程序获取当前位置API
    wx.getLocation({
      type: 'wgs84',
      success (res) {
        // 维度
        const latitude = res.latitude
        // 经度
        const longitude = res.longitude
        // 修改data数据
        that.setData({
          // 经纬度拼接
          location: longitude + ',' + latitude
        })
        // 获取三天数据，成功后保存数据到data
        HFAPI.threeDays({location: that.data.location}).then(res => {
          if(res.code === '200') that.setData({threeDays: res.daily})
        })
      }
     })
     
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

报错内容：getLocation需要在app.json中声明permission字段

解决方案：在app.json中声明permission字段，添加字段后获取位置时会弹出提示，点击确认授权后才能获取真实位置

  • "permission": {
  "scope.userLocation": {
    "desc": "尝试获取位置信息"
  }
}

项目界面

官方组件：微信小程序官方提供的组件

微信团队推出的第三方组件 - WeUI

  • 下载：gitHub下载地址

  • 引入：

    • 解压后，找到dist/style/下面的weui.wxss文件
    • 将文件复制到小程序根目录
    • 在全局样式文件 - app.wxss中引入即可 - @import 'weui.wxss';

  • 使用：

    • 通过微信开发者工具打开解压后的dist目录，下面有样例代码
    • 也可以通过网站查看效果

地图和列表

  • 使用WeUI的列表组件添加列表
  • 使用小程序提供的地图组件添加地图
<!--pages/qweather/qweather.wxml-->
<view class="container">
  <!-- 顶部地图，设置经纬度、标记、缩放比例 -->
  <map name="" longitude='{{longitude}}' latitude='{{latitude}}' markers='{{markers}}' scale="14"
    style="width: 100%; height: 160px"></map>
  <!-- 图文列表，暂时不处理 -->
  <view class="weui-panel weui-panel_access">
    <view class="weui-panel__hd">图文组合列表</view>
    <view class="weui-panel__bd">
      <a class="weui-media-box weui-media-box_appmsg">
        <view class="weui-media-box__hd">
          <image class="weui-media-box__thumb" src="" alt></image>
        </view>
        <view class="weui-media-box__bd">
          <h4 class="weui-media-box__title">标题一</h4>
          <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
        </view>
      </a>
      <a class="weui-media-box weui-media-box_appmsg">
        <view class="weui-media-box__hd">
          <image class="weui-media-box__thumb" src="" alt></image>
        </view>
        <view class="weui-media-box__bd">
          <h4 class="weui-media-box__title">标题二</h4>
          <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
        </view>
      </a>
    </view>
    <view class="weui-panel__ft">
      <a class="weui-cell weui-cell_active weui-cell_access weui-cell_link">
        <view class="weui-cell__bd">查看更多</view>
        <text class="weui-cell__ft"></text>
      </a>
    </view>
  </view>
</view>

// pages/qweather/qweather.js
// 获取和风天气封装接口
const HFAPI = require('../../utils/api')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 经度
    longitude: '',
    // 维度
    latitude: '',
    // 当前经纬度
    location: '',
    // 三天天气数据
    threeDays: [1, 2, 3],
    // 地图标记
    markers: []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 绑定一下this，方便后面调用
    const that = this
    // 小程序获取当前位置API
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        // 维度
        const latitude = res.latitude
        // 经度
        const longitude = res.longitude
        // 修改data数据
        that.setData({
          // 经度
          longitude,
          // 维度
          latitude,
          // 经纬度拼接
          location: longitude + ',' + latitude,
          // 地图标记，从课程中复制的
          markers: [{
            id: "0",
            latitude: latitude,
            longitude: longitude,
            iconPath: "/static/images/location.png",
            width: 40,
            height: 40,
            callout: {
              'display': 'ALWAYS', 
              'fontSize': '30rpx', 
              'content': '我在这',
              'padding': '8rpx', 
              'boxShadow': '0 0 5rpx #333',
              'borderRadius':'4rpx'
            }
          }]
        })
        // 获取三天数据，成功后保存数据到data
        HFAPI.threeDays({
          location: that.data.location
        }).then(res => {
          if (res.code === '200') that.setData({
            threeDays: res.daily
          })
        })
      }
    })

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

功能组合（上）

截屏2021-08-19 13.34.54

  • 将数据接口和项目界面组合在一起
  • 添加判断条件，数据获取成功设置data，否则弹出提示
  • 遍历获取到的三天天气数据，创建列表结构，查看更多不要
  • 遍历的时候如果没设置名字，默认使用item
  • 和风天气给的图片是编码，需要我们自己下载使用，然后拼接使用
<!--pages/qweather/qweather.wxml-->
<view class="container">
  <!-- 顶部地图，设置经纬度、标记、缩放比例 -->
  <map name="" longitude='{{longitude}}' latitude='{{latitude}}' markers='{{markers}}' scale="14"
    style="width: 100%; height: 160px"></map>
  <!-- 图文列表，暂时不处理 -->
  <view class="weui-panel weui-panel_access">
    <view class="weui-panel__hd">图文组合列表</view>
    <view class="weui-panel__bd">
      <!-- 遍历三天天气数据，wx:for - 遍历，wx:key - 设置key，好想随便写都可以 -->
      <a class="weui-media-box weui-media-box_appmsg" wx:for="{{threeDays}}" wx:key='abc'>
        <view class="weui-media-box__hd">
          <!-- 图片地址你用和风天气提供图标库 -->
          <image class="weui-media-box__thumb" src="../../static/hfIcon/{{item.iconDay}}.png" alt></image>
        </view>
        <view class="weui-media-box__bd">
          <!-- 绑定数据 -->
          <h4 class="weui-media-box__title">{{item.fxDate}}</h4>
          <view class="weui-media-box__desc">最高温度：{{item.tempMax}} - 最低温度：{{item.tempMin}}</view>
        </view>
      </a>
    </view>
  </view>
</view>

<!-- 引入模版，src属性即模版文件路径 -->
<import src='../../tpl/my-footer'></import>
<!-- 使用模版，is即模版name名称，data可以使用数据 -->
<template is='my-footer' data=''></template>

功能组合（下）

WXML模版

截屏2021-08-19 13.55.39

一些公共的页面结构，比如说页头、页脚、等信息，都是一样的，可以使用模版功能创建模版，在需要的页面调用即可

<!-- 创建模版 -->
<template name='my-footer'>
<!-- 模版内容 -->
  <view class="weui-footer weui-footer_fixed-bottom">
			<view class="weui-footer__links">
				<a href="javascript:home();" class="weui-footer__link">感谢和风天气</a>
			</view>
			<view class="weui-footer__text">拉勾教育提供支持</view>
		</view>
</template>

<!-- 页面的wxml文件底部使用模版 -->

................
<!-- 引入模版，src属性即模版文件路径 -->
<import src='../../tpl/my-footer'></import>
<!-- 使用模版，is即模版name名称，data可以使用数据 -->
<template is='my-footer' data=''></template>

移动端API

截屏2021-08-19 13.58.15

例如去拍照、扫一扫等功能，需要调用移动端API接口实现，在web端无法调用

<!--index.wxml-->
<view class="container">
  <!-- 去拍照按钮 -->
  <button type="primary" bindtap="toCamear">去拍照</button>
  <!-- 扫一扫按钮 -->
  <button type="primary" bindtap="bindScan">扫一扫</button>
  <!-- 展示扫一扫结果 -->
  <text>{{scanResult}}</text>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    // 扫一扫结果
    scanResult: ''
    ..............
  },
  .................
  // 跳转拍照页面
  toCamear: () => {
    // 小程序API
    wx.navigateTo({
      // 跳转页面
      url: 'camear',
    })
  },
  // 调用扫一扫接口
  bindScan: function() {
    // 微信扫一扫API
    wx.scanCode({
      // 成功后调用
      success: (res) => {
        console.log(res)
        // 修改数据
        this.setData({
          scanResult: res.result
        })
      }
    })
  },
})

<!--pages/index/camear.wxml-->
<view class="swiper-view">
  <!-- 拍照组件 -->
  <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 200px;"></camera>
  <!-- 拍照按钮 -->
  <button type="default" bindtap="takePhoto" style="margin: 20px 0; width: 100%;">拍照</button>
  <view style="margin: 20rpx; ">
    <!-- 拍照预览 -->
    <image mode="widthFix" src="{{src}}" style="width: 100%; border-radius: 60rpx;"></image>
  </view>
</view>

// pages/test/camera.js
Page({

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

  },
  ..................
  // 拍照
  takePhoto() {
    // 创建拍照上下文 - 小程序API
    const ctx = wx.createCameraContext()
    // 启动拍照
    ctx.takePhoto({
      // 拍摄质量
      quality: 'high',
      // 成功后调用
      success: (res) => {
        // 将地址存起来
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
})

申请高德地图开发者

avatar
文章
阅读
粉丝
相关推荐
git基本操作，一篇文章就够了！
116k阅读
 · 
1.5k点赞
近两万字小程序攻略发布了
146k阅读
 · 
5.1k点赞
小程序管理后台的基本操作
2.1k阅读
 · 
12点赞
捣鼓一个小程序
81k阅读
 · 
490点赞
微信小程序源码获取教程
85k阅读
 · 
1.1k点赞
6w字搞定Linux基本操作，建议收藏
37k阅读
 · 
1.0k点赞
小程序开发实践总结
13k阅读
 · 
554点赞
微信小程序架构原理基础解析
16k阅读
 · 
127点赞
😭血泪合集！uniapp小程序开发的超长实践总结！
67k阅读
 · 
1.3k点赞

友情链接：