小程序由谁开发？

小程序技术栈接近前端，由前端工程师开发

小程序技术选型

原生小程序
  • 微信小程序：WXML、WXSS、JavaScript

  • 支付宝小程序: AXML、ACSS、JavaScript

    框架

  • mpvue: 2018年后不再维护，不推荐

  • wepy: 腾讯开源，维护较少，不推荐
  • uni-app: 使用Vue开发跨平台
  • taro: 京东团队开发和维护，支持 Vue/React/Nerv
  • 用 uni-app 和 taro 开发原生App会遇到较多适配问题，体验也比原生App开发差很多

开发前准备工作

  1. 注册账号 – 申请AppID， https://mp.weixin.qq.com/cgi-bin/wx

image.png

  1. 下载小程序的开发工具：
  • 微信开发者工具：官方提供的开发工具，必须下载、安装；
  • VSCode：很多人比较习惯使用VSCode来编写代码；

用VSCode开发

将微信开发者工具的预览窗口分离并置顶，就可以改用 VSCode 编写代码，同时在预览窗口查看效果
vscode插件（装第一个就够用了）
image.png

项目初体验

创建项目, AppID 需要复制粘贴过来
image.png
每个页面由四个文件组成：js, json, wxml, wxss
image.png

hello world

index.wxml

  1. <view>{{message}}</view>

index.js

  1. Page({
  2.   data: {
  3.     message: 'hello world!'
  4.   },
  5. })

电影列表

index.wxml
block 相当于 Vue 里的 template, 是占位标签

  1. <!-- 2. 电影列表 -->
  2. <block wx:for="{{movies}}" wx:key="*this">
  3.   <view class="movie">{{item}}</view>
  4. </block>

index.js

  1. Page({
  2.   data: {
  3.     movies: ['蜘蛛侠', '钢铁侠', '咸蛋超人']
  4.   },
  5. })

index.wxss
rpx 单位相当于 px 单位的一半，使用 rpx 做单位才能移动端适配

  1. .movie {
  2.   font-size: 40rpx;
  3.   color: pink;
  4. }

计数器

  1. <!-- 3. 计数器 -->
  2. <view>{{counter}}</view>
  3. <button size="mini" bind:tap="handleIncrement">+1</button>
  4. <button size="mini" bind:tap="handleDecrement">-1</button>
  1. Page({
  2.   data: {
  3.     counter: 0
  4.   },
  5.   handleIncrement: function() {
  6.     this.setData({ counter: this.data.counter + 1})
  7.   },
  8.   handleDecrement: function() {
  9.     this.setData({ counter: this.data.counter - 1})
  10.   }
  11. })

官方文档阅读

https://developers.weixin.qq.com/miniprogram/dev/framework/
指南要从头到尾阅读，其他的用来查询
image.png