小程序学习 - 02 微信小程序案例实践

已于 2022-02-22 16:10:48 修改
阅读量2.2k 收藏 9
点赞数 1
分类专栏： 小程序 文章标签： 小程序 学习 微信小程序
于 2022-02-22 07:15:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012961419/article/details/123059912
版权

案例实践

创建一个页面，展示请求接口获取的数据。

申请接口

测试用接口可以使用：

  • 自己开发： 例如使用 Express
  • 模拟接口（Mock API）：例如 rap2
  • 第三方接口

本例使用 和风天气开发平台 提供的第三方接口，申请接口的步骤：

  1. 注册账号：注册 | 和风天气
  2. 创建应用并申请密钥（key），key 是调用接口的凭证
  3. 根据开发文档使用接口

创建天气页面

在全局配置文件中创建一个页面，并设置为首页（放到第一个）：

// app.json
{
"pages": [
  // 在首位添加页面
  "pages/qweather/index",
  "pages/index/index",
  "pages/logs/logs",
  "pages/test/test"
],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      // 添加导航按钮
      {
        "pagePath": "pages/qweather/index",
        "text": "天气"
      },
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/test/test",
        "text": "测试"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

调用接口

小程序中可以使用原生 API（wx.request()） 发起 HTTPS 请求。

注意：小程序只能使用 HTTPS / WSS 发起网络请求。

在页面加载时调用接口：

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

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 在小程序中 HTTPS 请求
    // `content-type` 默认为 `application/json`
    wx.request({
      // 获取未来 3 天天气
      url: 'https://devapi.qweather.com/v7/weather/3d',
      data: {
        // 应用key
        key: 'xxxxxx',
        // 经纬度
        location: '116.41,39.92'
      },
      success: res => {
        console.log(res)
      }
    })
  },
})

绑定接口域名

保存文件后，页面发起请求，控制台报错：

在这里插入图片描述

原因是小程序只可以跟指定的域名进行网络通信，要想发送请求必须绑定域名。

官方文档：网络

解决方法：

  1. 上线阶段的解决方案：绑定请求接口的域名（详情参考文档）
  2. 开发阶段的解决方案：开发工具配置不校验合法域名

在这里插入图片描述

优化代码

将接口中公共的部分提取出来，并将接口请求单独放到一个模块中。

// utils\api.js
// 接口地址
const BASE_URL = 'https://devapi.qweather.com/v7'
// 应用 key
const KEY = 'xxxxxx'

/**
 * API 请求函数
 */
const request = (url, method, data) => {
  // 设置请求 key
  data.key = KEY
  return new Promise((resolve, reject) => {
    wx.request({
      method,
      url,
      data,
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

/**
 * 导出接口
 */
module.exports = {
  // 未来三天天气预报
  threedays(data) {
    return request(BASE_URL + '/weather/3d', 'get', data)
  }
}

调用方法：

// pages/qweather/index.js
const API = require('../../utils/api')

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const data = {
      // 经纬度
      location: '116.41,39.92'
    }
    // 在小程序中 HTTPS 请求
    API.threedays(data)
      .then(res => {
        console.log(res)
      })
  },
})

动态获取地理位置

小程序原生 API wx.getLocation()）可以获取实时的地理位置。

// pages/qweather/index.js
const API = require('../../utils/api')

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        const data = {
          // 经纬度
          location: res.longitude + ',' + res.latitude
        }

        // 在小程序中 HTTPS 请求
        API.threedays(data)
          .then(res => {
            console.log(res)
          })
      }
    })
  },
})

此类接口需要用户授权，在调用接口时小程序会弹窗询问用户获取授权，未配置权限声明时提示如下：

在这里插入图片描述

接口需要在 app.json 中配置 permission，它用于配置请求用户授权时展示的接口用途说明文字。

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

在这里插入图片描述

第三方 UI 组件 - WeUI

小程序官方提供了很多组件用于界面展示，开发者也可以使用第三方组件。

本例使用了微信官方设计团队为小程序量身定做的基础样式库：WeUI for 小程序

使用方式：

引入样式文件：

/**app.wxss**/
@import 'weui.wxss';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

使用 panel 组件：

<!--pages/qweather/index.wxml-->

<view class="weui-panel weui-panel_access">
  <view class="weui-panel__hd">图文组合列表</view>
  <view class="weui-panel__bd">
    <navigator aria-labelledby="js_p1m1_bd" class="weui-media-box weui-media-box_appmsg" url="javascript:">
      <view aria-hidden="true" class="weui-media-box__hd">
        <image class="weui-media-box__thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt></image>
      </view>
      <view aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
        <text class="weui-media-box__title">标题一</text>
        <view class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</view>
      </view>
    </navigator>
  </view>
</view>

使用原生组件 - 地图组件

<!--pages/qweather/index.wxml-->
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="14" style="width: 100%;height:160px;"></map>

<view class="weui-panel weui-panel_access">...
</view>

记录经纬度：

// pages/qweather/index.js
const API = require('../../utils/api')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude: null,
    latitude: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        const {
          longitude,
          latitude
        } = res

        this.setData({
          longitude,
          latitude
        })

        const data = {
          // 经纬度
          location: longitude + ',' + latitude
        }

        // 在小程序中 HTTPS 请求
        API.threedays(data)
          .then(res => {
            console.log(res)
          })
      }
    })
  },
})

功能组合

将接口提供的数据应用到视图组件上

<!--pages/qweather/index.wxml-->
<map longitude="{{longitude}}" latitude="{{latitude}}" 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">
    <navigator wx:for="{{threedays}}" wx:key="fxDate" aria-labelledby="js_p1m1_bd" class="weui-media-box weui-media-box_appmsg" url="javascript:">
      <view aria-hidden="true" class="weui-media-box__hd">
        <image class="weui-media-box__thumb" src="" alt></image>
      </view>
      <view aria-hidden="true" id="js_p1m1_bd" class="weui-media-box__bd">
        <text class="weui-media-box__title">{{item.fxDate}}</text>
        <view class="weui-media-box__desc">温度：{{item.tempMin}}-{{item.tempMax}}℃</view>
        <view class="weui-media-box__desc">风向：{{item.windDirDay}}</view>
        <view class="weui-media-box__desc">风力：{{item.windScaleDay}}级</view>
      </view>
    </navigator>
  </view>
</view>

使用和风天气图标

和风天气返回的图标信息是图标代码，即图标文件名。

下载图标：天气图标，存放到项目目录。

<!--pages/qweather/index.wxml-->
<image class="weui-media-box__thumb" src="../../static/qweather/icons/{{item.iconDay}}.svg" alt></image>

预览

开发完成后，可以通过工具栏的【预览】或【真机调试】在手机上查看小程序。

在这里插入图片描述

它们会上传编译后的代码包到服务器上（上限2M），然后生成一个二维码，手机扫码即可查看。

真机调试与预览的区别是，前者可以会打开一个调试器窗口，可以在调试器里对小程序进行代码测试，类似浏览器的 console 控制台。

页脚模板

定义页脚模板

<!-- tpl\footer.wxml -->
<template name="my--footer">
  <view class="weui-footer">
    <view class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</view>
  </view>
</template>

注意：开发者工具中调试时删除 "lazyCodeLoading": "requiredComponents" 配置。

使用模板

<!--pages/qweather/index.wxml-->
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="14" style="width: 100%;height:160px;"></map>

<view class="weui-panel weui-panel_access">...
</view>

<!-- 引入页脚 -->
<import src="../../tpl/footer.wxml" />
<template is="my-footer"></template>

移动端 API - 拍照

添加测试页面：

"pages": [
  "pages/qweather/index",
  "pages/index/index",
  "pages/logs/logs",
  "pages/test/test",
  // 添加页面
  "pages/test/camera"
],

添加按钮入口：

<!--pages/test/test.wxml-->
<text bindtap="goIndex">跳转到 index</text>

<button type="primary" bindtap="goCamera" style="width: 100%;">拍照</button>

<!-- 引入页脚 -->
<import src="../../tpl/footer.wxml" />
<template is="my-footer"></template>

定义跳转方法：

// pages/test/test.js

goCamera() {
  wx.navigateTo({
    url: '/pages/test/camera',
  })
}

定义拍照页面：

<!--pages/test/camera.wxml-->
<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: 20px;">
    <text>预览</text>
    <image mode="widthFix" src="{{src}}" style="width:100%;border-radius:60rpx"></image>
  </view>
</view>

调用拍照 API：

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

  /**
   * 页面的初始数据
   */
  data: {
    src: '', // 图片地址
  },

  takePhoto() {
    // 创建摄像头的上下文
    const ctx = wx.createCameraContext()

    ctx.takePhoto({
      quality: 'high', // 质量
      success: res => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  }
})

发布小程序

发布小程序的步骤：

  1. 上传代码
  2. 提交审核
  3. 发布版本

上传代码

上传代码在微信开发者工具操作：

在这里插入图片描述

注意：测试号的 AppID，无法发布，上传按钮是禁用的。

提交审核

在小程序后台-【管理-版本管理】中有三个版本管理：

  • 线上版本
  • 审核版本
  • 开发版本

上传代码后会在开发版本中显示：

在这里插入图片描述

提交成功后会生成审核版本：

在这里插入图片描述

审核小细节：有时审核不通过可能是因为【服务类目】与小程序功能不匹配，可以在【设置-基本设置】中配置【服务类目】，如：

在这里插入图片描述

发布版本

审核需要等待一段时间（几小时），审核通过后，右侧【详情】按钮将变为【提交发布】，点击发布后，就会生成线上版本完成发布流程。

在这里插入图片描述

皮蛋很白
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序开发-仿微信案例源码.zip
11-21
微信小程序开发-仿微信案例源码.zip
【微信小程序】基础篇 -- 案例 - 本地生活（列表页面）（三十）
JMFive的博客
03-09 1万+
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第30篇文章;今天开始学习微信小程序的第15天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序三个实例带你入门
weixin_44077556的博客
07-18 3万+
微信小程序三个实例带你入门 前置说明 新建微信小程序项目时，默认使用云开发服务（不需要云开发可以关闭） 项目目录及文件含义查看微信官方文档 app.json部分重点说明 开发一个默认页面 我们新建componet文件夹，在componet中新建submit文件夹，最后新建名为submit的page页，结果如下。 然后在app.json中配置一个默认页面“componet/submit/submit"。 最后在submit.js中配置加载数据，在submit.json中配置导航栏及标签
微信小程序页面案例
qq_46099629的博客
09-30 162
一、运行效果 二、代码 1. home.wxml <!-- pages/home/home.wxml --> <swiper indicator-dots circular interval="3000" autoplay="true"> <swiper-item wx:for="{{swiperList}}" wx:key="index"> <image src="{{item}}" mode="widthFix"></image>
uni开发微信小程序引入和风天气第三方库 icon不显示问题处理（阿里等icon库同样的处理方式）
weixin_50666739的博客
10-27 783
微信小程序引入第三方库 icon不显示问题处理
2022暑期微信小程序学习02期-天气查询小程序
junqiduhang的博客
08-18 382
天气查询微信小程序制作
微信小程序入门案例（二）
qq_52431815的博客
04-05 494
6、onReachBottom() 会在上拉到距离屏幕底部50像素(默认50像素，可在对应的.json文件中修改)时调用，首先判断下一页是否还有数据需要，如果没有的话，wx.showToast()方法会在屏幕中跳出提示对应的提示框，显示title中的内容，如果有的话，修改page的值，再次发送请求下一页的数据。在home.wxml，将九宫格的数据添加导航，并传递对应的id和name，用于详情页的标题和发起其对应请求，代码如下。点击美食，跳转到美食的详情页，点击洗浴足疗跳转对应的详情页，以此类推…
微信小程序--》从零实现小程序项目案例
ztK63LrD的博客
02-06 2万+
🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。👀引言⚓经过web前端开发的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了微信小程序专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第一站就是小程序开发，希望看到我文章的朋友能对你有所帮助。今天借助黑马的本地生活案例，加强一下自己对小程序的学习，并将学习过程分享出来，希望能和以前学习的知识相互印证。
微信小程序 - 80个实用的微信小程序项目实例
热门推荐
@必意玲
02-17 5万+
gitee下载地址：WeApp_Demos: 微信小程序120例 wx-gesture-lock微信小程序的手势密码 WXCustomSwitch微信小程序自定义 Switch 组件模板 WeixinAppBdNovel微信小程序demo：百度小说搜索 shitoujiandaobu小程序：石头剪刀布（附代码说明） audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义 star微信小程序开发之五星评分 switchCity...
微信小程序作品实例
宝子的博客
07-14 3156
这是我在学习完微信小程序后，写的一个小案例，是一个关于女性商品的
微信小程序案例分享
weixin_43898459的博客
01-20 2720
微信小程序+后台管理类： 1，社区团购小程序 2，音乐播放器小程序 3，家具商城小程序 4，二手交易小程序 5，疫苗小程序 6，智慧停车小程序 7，读书小程序 8，美食小程序 前后端分类: 管理后台类： 1,企业招聘 2,客户关系管理系统 3,试剂库管理系统 4,新媒体工作室管理 5,赠品系统 6，送礼系统 7，论坛系统 9，超市管理系统 10，志愿者活动系统 ...
计算机专业毕业设计-微信小程序案例-ssm微信小程序的短视频系统-毕设源码+说明文档.rar
03-09
**微信小程序案例：SSM（Spring、SpringMVC、MyBatis）短视频系统** 此资源为计算机专业毕业设计提供了一个完整的实战项目。它是一个基于微信小程序的短视频系统，采用目前流行的SSM框架进行开发，实现了前后端分离...
微信小程序开发-仿微信社交案例源码.zip
11-21
微信小程序开发-仿微信社交案例源码.zip
微信小程序开发-仿微信电商案例源码.zip
11-21
微信小程序开发-仿微信电商案例源码.zip
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
抖音 小程序 获取手机号 报错 getPhoneNumber:fail auth deny
最新发布
fuchto的博客
04-24 195
这是因为 当前小程序没有获取 手机号的 权限。后可用，默认获取权限，无需申请；此能力仅支持小程序通过。
原生小程序自定义vantUI中van-collapse手风琴组件的标题
文龙刚的博客
04-24 88
【代码】原生小程序自定义vantUI中van-collapse手风琴组件的标题。
陪诊小程序的市场潜力与发展趋势研究
2402_83689311的博客
04-24 140
随着社会的快速发展和人口老龄化的加剧，医疗服务需求日益增长，而陪诊服务作为医疗服务的重要补充，正逐渐受到人们的关注和青睐。陪诊小程序利用互联网技术，将陪诊服务与用户需求紧密连接，提高了服务的便捷性和效率。他们往往需要更加细致的照顾和陪伴，而陪诊小程序能够提供专业的陪诊服务，满足老年人的需求。随着技术的不断创新和市场的不断拓展，陪诊小程序将在未来医疗服务领域发挥更加重要的作用，为人们的生活带来更多便利和舒适。通过拓展海外市场，引入国际先进的陪诊服务理念和模式，提升陪诊小程序的国际竞争力。
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 2773
如果还要不懂运行不出效果可以私信博主
基于微信小程序的教务管理系统 doc
09-02
微信小程序是一种轻量级的移动应用程序，可以在微信中直接运行。基于微信小程序的教务管理系统（以下简称小程序教务系统）是一种基于微信平台的教学管理解决方案。 小程序教务系统可以为学校、教师和学生提供便捷的教学管理服务。学校方面，可以通过小程序教务系统进行课程安排、教学资料上传与分享、学生考勤管理等。教师方面，可以通过小程序教务系统进行课程发布、学生成绩管理、作业布置与批改等教学工作。学生方面，可以通过小程序教务系统查询课程信息、上传作业、查看成绩等。 小程序教务系统的特点是方便快捷、跨平台、易于使用。学校、教师和学生只需要在微信中打开小程序，即可完成相关教学管理任务，无需下载独立的应用程序。而且，小程序可以在iOS和Android系统上运行，满足不同用户群体的需求。另外，小程序教务系统的用户界面简洁明了，操作也相对简单，即使对于不擅长使用技术的用户也能够轻松上手。 小程序教务系统还具备一些特殊功能。例如，可以通过微信支付功能进行学费缴纳，方便学生及家长进行支付操作。同时，小程序教务系统也可以与学校官网、学生信息管理系统等进行数据的互联互通，实现教务管理信息的有效整合。 综上所述，基于微信小程序的教务管理系统是一种便捷、高效的教学管理解决方案，为学校、教师和学生提供了方便快捷的教学管理服务，具有很大的发展潜力和应用价值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值