后端程序员也能看懂的微信小程序开发入门

4,160 阅读8分钟

小程序时至今日已经非常火爆了,作为软件体系中的一员,越来越多的公司与个人都在发展自己的小程序,而且小程序不再是单一的微信小程序了,还有百度小程序、支付宝小程序、抖音小程序等等。说明小程序是很不错的一个开发技术,也是便于找工作的一项技能,本文指在让大家快速了解微信小程序的入门与开发。

准备工作

在进入小程序开发之前,首先需要准备几件事情:

  1. 微信公众号平台注册一个账号
  2. 了解小程序的开发文档(简单阅读)
  3. 下载并安装微信开发者工具

当以上步骤准备完毕之后,我们正式进入小程序开发,跟着我的步骤往下走吧!

开始动手

首先打开开发者工具,会看到如下界面,其中需要注意的点有2个:

  • 后端服务:因为是入门体验,这里选择不使用云服务,后续会给大家介绍云开发。
  • 语言:分为typescript和这里选择JavaScript,作为后端开发的我们,选择JavaScript

工程创建成功进入之后,具体的项目结构如下图所示

  • pages: 存放项目页面的地方
  • utils:用js写的一个工具类方法
  • app.json:小程序的全局配置,包括标题,⾊系等等
  • app.js:应用程序的入门

了解更多=>配置描述

试着修改app.json中navigationBarTitleText的内容,可以看到如下结果

文件类型介绍

wxml

wxml后缀的文件是小程序中的html页面,我们打开page/index/index.wxml, 其中的 <view> 标签就是我们熟悉的<div>

更多内容介绍=>组件文档链接

wxss

WXSS可以理解为CSS样式文件,WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。

比如新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像 素差,采用一些技巧来换算这些像素单位。 WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给笑程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差

js

小程序的核心逻辑都在js文件里,整体小程序开发起来的感觉,像是vue和react混合体,即有data数据定义和{{}}双向绑定以及 wx:if 标签,还有setState这些语法概念,小程序特有的生命周期函数。

实践真知

结合上面的描述,我们来修改一下这些文件的内容,写点我们自己的东西,

app.js

这里会打印一段日志生命周期方法,小程序启动啦!

app.json

这里会显示底部tab导航栏

pages/index/index.wxml

这里就是把首页改成了我们自己想要的效果,<view>相当于<div>

index.js

把原有的内容都删除,改如下内容,data定义了数据,onxxx是页面的生命周期方法,分表标识页面的不同状态

保存编译运行下,最终会看到如下效果

至此,等于说是完成了一个简单的小程序页面了,自己怎么搞页面了,但是这一点用都没用,交互呢?按钮呢?一些动态效果呢?啥啥都没,接下来继续扩展功能,这里将学习小程序的api使用

小程序的事件绑定

index.wxml文件中,已经定义了<button>标签,在html开发中,要给按钮绑定事件需要使用 onclick属性,但在小程序的开发中,使用的bindtap属性, 如图所示,分别给这4个按钮绑定了事件函数

既然按钮引用了这4个方法,那么就需要定义这4个函数方法,之前说过,页面的逻辑处理都是在js文件中,所以在index.js, 追加4个方法,内容如下

Page({
  toast() {
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  },
  toLog() {
    wx.switchTab({
      url: '/pages/logs/logs',
    })
  },
  showLoading() {
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading({
        complete: (res) => {
          console.log('加载中效果消失')
        },
      })
    }, 3000)
  },
  showModeal() {
    wx.showModal({
      title: '确定吗?',
      content: '这是一个模拟弹窗',
      cancelColor: 'red',
      success(res) {
        if (res.confirm) {
          console.log('⽤户点击确定')
        } else if (res.cancel) {
          console.log('⽤户点击取消')
        }
      }
    })
  },
})
  • wx.showToast():弹出提个提示框
  • wx.switchTab():切换底部tab的内容
  • wx.showLoading():显示加载的效果
  • wx.hideLoading():关闭加载的效果
  • wx.showModal():弹出带有选择按钮的提示框

写法上其实没有太多难处, xxx(){}就是声明了一个方法,特殊的是其中的内部,都是wx.xxxxxx,这个就是微信小程序的api了,就有点像java框架的api方法一样List.isEmpty(),微信封装的都是 wx 开头的,想要什么样的功能直接.出来获取用就好,参数涵义都是微信定义好的

更多想了解=>微信小程序API指南

完成添加显示功能

回到之前的 index.wxml文件,追加如下内容

index.js

页面逻辑的js文件追加如下内容

  handleInput(e){
    console.log('input',e.detail)
    # 模拟react的setState,固定写法
    this.setData({
      # val是定义的属性,e是输入事件对象
      val: e.detail.value
    })
  },
  add(){
    this.setData({
      # 可以理解为把原data对象中的todos属性值进行循环遍历到一个新的todos对象中,同时把data对象中的val也追加到这个新todos中
      # 类似java中的 List newBooks = list.stream().map(b->Book).add(newBook).toList()
      todos: [...this.data.todos, this.data.val],
      val: ''
    })
  },

最终效果如图所示

扩展体验

使用微信的相机api

index.wxml

添加<camera>标签内容即可使用内置相机

<view>
	<camera style="width:100%;height:300px;">
	</camera>
	## 给按钮绑定takePhoto方法
	<button type="primary" bindtap="takePhoto">拍照</button>
</view>

index.js

添加takePhto方法的实现

takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: res => {
        this.setData({
        # 修改了图片的src地址
          src: res.tempImagePath
        })
      }
    })
  },

媒体播放器

index.wxml

添加<audio>音频组件,具体参数描述可以参考官方文档=>audio 组件描述,同样的为每个按钮绑定了方法

<view>
	<audio poster="{{poster}}" name="{{musicName}}" author="{{author}}" src="{{musicSrc}}" id="myAudio" controls loop></audio>
	<button type="primary" bindtap="audioPlay">播放</button>
	<button type="primary" bindtap="audioPause">暂停</button>
	<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
	<button type="primary" bindtap="audioStart">回到开头</button>
</view>

index.js

追加内容, 以下内容和官方文档操作指南一致

onReady(e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
},
audioPlay() {
    console.log(this.audioCtx)
    this.audioCtx.play()
},
audioPause() {
    this.audioCtx.pause()
},
audio14() {
    this.audioCtx.seek(14)
},
audioStart() {
    this.audioCtx.seek(0)
},

## 给data设置属性内容, 因为起那么的<audio>标签属性有用
data:{
    musicName: '像我这样的人',
    author: '毛不易',
    poster: 'http://singerimg.kugou.com/uploadpic/softhead/400/20180611/20180611160019456.jpg',
    musicSrc: 'https://sharefs.yun.kugou.com//202004130106//5f99b0098214a54497e4e59d041d0064//G146//M07//02//14//cpQEAFwqEt2AMf4dACiMsITsnwk265.mp3',
}

歌曲正在播放中哦!~

获取用户的的信息

index.wxml

使用<button>标签获取用户信息,其中open-type="getUserInfo"(获取用户信息,可以从bindgetuserinfo回调中获取到用户信息), bindgetuserinfo="getUserInfo"(用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效)

<view class="userinfo">
   ## wx:if 如果没有用户信息就显示这个按钮
	<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
	# 如果有就显示头像和昵称
	<block wx:else>
		<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
		<text class="userinfo-nickname">{{userInfo.nickName}}</text>
	</block>
</view>

index.js

# 给data对象定义几个属性
data:{
 userInfo: {},
 hasUserInfo: false,
 canIUse: wx.canIUse('button.open-type.getUserInfo')
}
# 添加方法
bindViewTap: function () {
    console.log('有人点了头像')
},
getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
    })
},

关于微信Demo中的userInfoReadyCallback解释

云开发之数据库操作

首先点击开发工具栏中的云开发按钮,之后会引导去开通云开发

环境名称和环境ID可以自定义修改,环境配置是免费初始化的,以后有需要可以扩容
接下来创建集合(可以理解为数据表),之后插入数据记录,这里的操作和mongoDB很相似

修改一下数据库的权限配置,便于测试开发,如果有人查不到数据,但代码写的没问题可以来这里看看

index.js 追加如下代码,更多的内容描述参考=>云开发指南

 onLoad() {
    console.log('index⻚⾯加载拉')
    this.getbooks()
  },
  getbooks() {
    # 微信云开发api的使用,固定语法,这里获取全部数据
    wx.cloud.database().collection('bookdb').get({
      success(res) {
        console.log('获取到图书数据', res)
        this.setData({
          books: res.data
        })
      }
    })
  },

效果如图,加载到了之前在数据库插入的数据

源码地址

本文所有项目代码

点关注,不迷路

文章每周持续更新,可以微信搜索「 十分钟学编程 」第一时间阅读和催更,如果这个文章写得还不错,觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️
各位的支持和认可,就是我创作的最大动力,我们下篇文章见!