微信小程序入门

微信小程序基础知识总结

• 前言
• • 开发环境搭建
  • • 注册微信公众号
    • 安装微信开发者工具
  • 创建项目
  • • 小程序目录结构
  • vscode开发微信小程序
• git管理小程序版本
• 知识总结
• 练习
• • 计算器
  • 其它

前言

开发环境搭建

注册微信公众号

安装微信开发者工具

下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

根据需要选相对应的版本进行下载

使用安装向导安装微信开发者工具

选择安装路径

创建项目

首次打开微信开发者工具时需要微信扫码登录
单击“小程序项目”可以创建一个新的小程序项目

创建项目前需要获取AppID

小程序目录结构

• pages：页面文件目录
• pages/XXX：页面文件目录，例如pages/index
• pages/XXX/XXX.js：页面逻辑文件
• pages/XXX/XXX.json：页面配置文件
• pages/XXX/XXX.wxml：页面结构文件
• pages/XXX/XXX.wxss：页面页面样式文件
• pages/logs：日志目录
• project.config.json：项目配置文件
• app.js：小程序逻辑文件
• app.json：小程序配置文件
• app.wxss：小程序样式文件
• utils：公共脚本文件目录
• utils/utils.js：公共脚本文件

注：在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露

除了上述内容之外，小程序通常会加入一些样式库

一般情况下，图、视频等文件放在服务器，需要的时候写入链接就可以了。

vscode开发微信小程序

安装插件:

1. wechat-snippet
   微信小程序代码辅助,代码片段自动完成
2. minapp
   微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
   需要输入才会触发标签补全
   输入空格会触发对应标签的属性补全
3. wxapp-helper
   选择创建wx组件，自动生成配套的文件

git管理小程序版本

知识总结

微信小程序开发知识总结

练习

计算器

<view class="body">
  <view class="calc">
    <view class="result">
      <view class="result-num">{{num}}</view>
      <view class="result-op">{{op}}</view>
    </view>
    <view>
      <view class="btn" bindtap="resetBtn">C</view>
      <view class="btn" bindtap="delBtn">DEL</view>
      <view class="btn" bindtap="opBtn" data-val="%">%</view>
      <view class="btn" bindtap="opBtn" data-val="/">/</view>
    </view>
    <view>
      <view class="btn" bindtap="numBtn" data-val="7">7</view>
      <view class="btn" bindtap="numBtn" data-val="8">8</view>
      <view class="btn" bindtap="numBtn" data-val="9">9</view>
      <view class="btn" bindtap="opBtn" data-val="*">*</view>
    </view>
    <view>
      <view class="btn" bindtap="numBtn" data-val="4">4</view>
      <view class="btn" bindtap="numBtn" data-val="5">5</view>
      <view class="btn" bindtap="numBtn" data-val="6">6</view>
      <view class="btn" bindtap="opBtn" data-val="-">-</view>
    </view>
    <view>
      <view class="btn" bindtap="numBtn" data-val="1">1</view>
      <view class="btn" bindtap="numBtn" data-val="2">2</view>
      <view class="btn" bindtap="numBtn" data-val="3">3</view>
      <view class="btn" bindtap="opBtn" data-val="+">+</view>
    </view>
    <view>
      <view class="btn" bindtap="numBtn" data-val="0">0</view>
      <view class="btn" bindtap="dotBtn">.</view>
      <view class="btn" bindtap="opBtn" data-val="=">=</view>
    </view>
  </view>
  
</view>

const calc = require('../../../utils/calc.js')

Page({

  /**
   * 页面的初始数据
   */
  result: null,
  isClear: false,

  data: {
    num: "",
    op: ""
  },


  // 数字按钮事件处理函数
  numBtn: function (e) {
    var num = e.target.dataset.val
    if (this.data.num === '0' || this.isClear) {
      this.setData({
        num: num
      })
      this.isClear = false
    } else {
      this.setData({
        num: this.data.num + num
      })
    }
  },

  // 运算符事件处理函数
  opBtn: function (e) {
    var op = this.data.op
    var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      return
    }
    this.isClear = true
    if (this.result === null) {
      this.result = num
      return
    }
    if (op === '+') {
      this.result = calc.add(this.result, num)
    } else if (op === '-') {
      this.result = calc.sub(this.result, num)
    } else if (op === '*') {
      this.result = calc.mul(this.result, num)
    } else if (op === '/') {
      this.result = calc.div(this.result, num)
    } else if (op === '%') {
      this.result = this.result % num
    }
    this.setData({
      num: this.result + ''
    })
  },

  // 小数点事件处理函数
  dotBtn: function () {
    if (this.isClear) {
      this.setData({
        num: '0.'
      })
      this.isClear = false
      return
    }
    if (this.data.num.indexOf('.') >= 0) {
      return
    }
    this.setData({
      num: this.data.num + '.'
    })
  },

  // DEL按钮处理函数
  delBtn: function () {
    var num = this.data.num.substr(0, this.data.num.length - 1)
    this.setData({
      num: num === '' ? '0' : num
    })
  },

  // C按钮事件处理函数
  resetBtn: function () {
    this.result = null
    this.isClear = false
    this.setData({
      num: '0',
      op: ''
    })
  }
})

其它

一个简单的音乐播放器

---

附

官方文档