初识微信小程序

及时行樂
192 阅读5分钟

简介

微信⼩程序，简称⼩程序，英⽂名 Mini Program Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

特点：

  • 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
  • 推⼴app或公众号的成本太⾼。
  • 开发适配成本低。
  • 容易⼩规模试错，然后快速迭代。
  • 跨平台。

开发准备

开发步骤

1.微信小程序开发环境

  • 微信小程序注册
  • 微信小程序开发工具使用

1-1.微信小程序注册

小程序注册

  • 首先我们要使用一个没注册过微信公众号及小程序的邮箱来注册
  • 在信息登记时，一般只能使用个人小程序，除非你是公司的企业微信
  • 这里我已经注册，而且是个人学习使用，所以我是个人小程序账号

1-2.微信开发者工具使用

我们新建一个项目

新建小程序

微信开发者工具里面集成了很多插件和提示

初始的目录结构是只有index页面和logs页面

我们如果想要更改页面，需要在**.wxml后缀文件**更改

如果是事件脚本代码就在对应的**.js文件**更改

2.小程序组件使用

我们使用button组件实现页面层级跳转

<!--index.wxml-->
<view class="container">
  <view>首页</view>
  <button type="primary" bindtap="btnGoPage2">跳转下个页面</button>
</view>

 <!--index.js-->
 //跳转事件
 btnGoPage2:function(){
    wx.navigateTo({
      url: '/pages/page2/page2',
    })
  },

小程序页面跳转

3.微信小程序API使用

我们使用几个微信小程序常见的API来体验一下

  • 扫码API

    <!--index.js-->
btnScanCode:function(){
    // 扫码
    wx.scanCode({
      success:function (res) {
        console.log(res);
      }
    })
}
<!--index.wxml-->
<view class="container">
  <view>首页</view>
  <button type="primary" bindtap="btnScanCode">扫码</button>
</view>

    扫码api文档

    ps:在微信开发者工具里面直接点击扫码按钮是打开文件，我们使用真机调试用手机使用扫码功能才能调起摄像头扫码

  • 地理位置信息相关API

<!--index.js-->
btnScanCode:function(){
   // 地理位置
    wx.getLocation({
      success:function (res) {
        console.log(res);
        // 打开地图
        wx.openLocation({
          latitude: res.latitude,
          longitude: res.longitude,
        })
      }
    })
}

因为地理位置属于敏感信息，所以获取前会询问权限

我们确认即可

然后成功打开地图

地理位置信息跳转

我们还可以选择地理位置

//获取选择地理位置
wx.chooseLocation({
         latitude: res.latitude,
         longitude: res.longitude,
         success:function (res) {
         	console.log(res);
         }
     })
 }

位置信息

  • 获得微信步数信息

    btnGetWerun:function () {
    // 微信运动
    wx.getWeRunData({
      success: (result) => {
        console.log(result)
      },
    })
  },

    这里我们调用 getWeRunData 来获取用户过去三十天的运动数据，同时需要授权

    但是需要先调用 wx.login 接口

    我们点击按钮得到返回的data数据，encryptedData是加密后的运动数据，如果要使用需要进行解码

    加密后的运动数据

这里我们不做过多解释，如果是小程序云开发的模式就不需要解密

4.微信小程序云开发

4-1.什么是云开发

  • 开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。
  • 云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

4-2.如何开启云开发

官方文档：developers.weixin.qq.com/miniprogram…

创建云开发模式小程序

创建云开发小程序

4-3.实现一个简单的云函数

什么是云函数：云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。

我们来使用一下云开发模式下的云函数功能，十分强大

我们先创建一个云函数

在cloudfunction文件夹里面创建一个云函数firstcloud

创建云函数

这里我们删掉初始化代码，实现一个a+b的简单函数

在page1.js我们调用一下云函数

// miniprogram/pages/page1/page1.js
btnCallCloud:function () {
    wx.cloud.callFunction({
      name:"firstcloud",
      data:{
        a:1,
        b:2
      },
      success:function (res) {
        console.log(res);
      }
    })
  },

打印结果：

云函数成功结果

我们可以看到返回了正确的1+2=3

4-4.再次实现获取微信运动的数据

创建云函数werundata

//werundata/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  const {werundata}=event;
  return {
    werundata
  }
}

没有什么特别的就是把数据放入云函数里面 再返回出来

我们在首页index调用getwerun云函数

index.js
btnGetWerun: function() {
    wx.getWeRunData({
      success: (result) => {
        wx.cloud.callFunction({
          name:"getwerun",
          data:{
            werundata:wx.cloud.CloudID(result.cloudID)
          },
          success:(res)=>{
            console.log(res);
            var stepList=res.result.werundata.data.stepInfoList;
            wx.showModal({
             //这里取数组最后一个的数据，就是当天的
              content:"您今天一共走了 "+stepList[stepList.length-1].step+" 步"
            })
          }
        });
      },
    })
  },

效果如下：

微信运动数据获取

我们也可以看到微信运动的数据

有三十天的这里我没有截图全部

微信运动数据打印

而且云函数是在云端运行，微信私有协议天然鉴权，所以我们不必在调用wx.login接口来鉴权

总结

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

以上是我对小程序初次邂逅学习的一些总结，仅做个人学习参考使用

avatar
文章
阅读
粉丝