微信小程序小白入门—从注册到发布全流程

俄小发
10,463 阅读10分钟

前言

工作中很少有机会写微信小程序，想学习了解一下整个微信小程序的开发流程，有不对的地方欢迎指正。

image.png

初识小程序

微信小程序，简称小程序，是一种不需要下载安装即可使用的应用，打开即可使用，不用等待太久，随时随地，触手可及。

优势

  • 无需下载安装，无需注册，用完即走，不会过多地占用手机内存
  • 小程序可以跨平台（苹果或安卓系统）运行，其开发门槛和成本比APP开发要低
  • 打开速度比H5（HTML5）要快，接近于原生App的体验
  • 安卓手机可以直接添加小程序至手机桌面，打开方式和App一样方便

劣势

  • 小程序目前无法直接分享至朋友圈，只能分享给微信好友或微信群
  • 小程序的二维码不支持长按识别，只能通过微信扫一扫才能打开
  • 小程序没有push功能，不能给用户推送消息和个人相关的通知消息
  • 小程序没有用户体系，用户不需要注册，因此用户用完即走，很难形成用户体系

小程序接入流程

接入流程主要分为4大步骤：注册、信息完善、开发小程序、审核和发布小程序

1. 注册

在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。

2. 信息完善

填写小程序基本信息，包括名称、头像、介绍及服务范围等。

3. 开发小程序

完成小程序开发者绑定，开发信息配置后，开发者可下载开发者工具，参考开发文档进行小程序的开发和调试。

4. 审核和发布小程序

完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

小程序开发准备

小程序开发必须要在专门的开发者工具进行开发，开发者工具下载地址

新建小程序

创建小程序，输入项目名称、目录、AppID等，还可以选择微信提供的一些模板，快速生成一个功能相对齐全的小程序。

image.png

image.png

微信开发者工具

微信开发者工具主界面，从上到下、从左到右分别为：菜单栏、工具栏、模拟器、编辑器、调试器。 image.png image.png

小程序调试工具

用来调试小程序，非常类似于网页的调试工具，分为以下几个功能模块：

  • Wxml：页面结构和结构对应的 wxss 属性
  • Console：控制台，输出提示信息
  • Sources：当前项目的脚本文件
  • Network：观察和显示request和socket的请求情况
  • Perfomance：性能分析
  • Memory：内存
  • AppData：当前小程序的具体数据
  • Storage：显示当前项目使用wx.setStorage或者wx.setStorageSync存储的数据
  • Security： 安全性
  • Sensor：模拟地理位置和模拟移动设备表现，用于调试重力感应 API
  • Mock：模拟接口
  • Audits：体验评分检测
  • Vulnerability：发现并修复小程序内的接口安全漏洞，提升小程序安全性 image.png

小程序框架

微信团队为小程序提供的框架命名为 『MINA 应用框架』 ，通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能，对上层提供一整套Javascript API，让开发者能够方便的使用微信提供的各种功能与能力。

渲染层和逻辑层

官网介绍

image.png

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS 脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端做中转，逻辑层发送网络请求也经由Native进行转发。

MVVM 模式

MINA框架的核心是MVVM模式，当修改数据的时候，只需要在逻辑层修改数据，视图层就会做出相应的更新。

MVVM的核心是ViewModel层，负责转换Model层中的数据对象来让数据更容易管理和使用，向上与View视图层进行双向数据绑定，向下与Model层通过接口请求进行数据交互，起承上启下的作用。

image.png

代码构成

一个小程序主要包含pages页面、utils工具类库、app相关的一些配置、project.config.json项目配置。

image.png
  • pages页面（小程序的每一个页面）由4个文件组成：
    • js： 页面逻辑，相当于控制层，也包括部分数据
    • wxml：页面结构展示，相当于视图层(view)
    • json：页面配置，配置一些页面展示的数据，充当部分的模型
    • wxss：页面样式表
  • utils工具类库：常用的可共用的工具类
  • app 配置：必须放在根目录下
    • app.js：全局的小程序逻辑处理
    • app.wxss：小程序的公共样式表
    • app.json：小程序的公共配置，可以配置页面路径、窗口表现、底部 tabBar等，更多可查看官网全局配置项

小程序开发

App 程序

小程序主体相关配置，宿主环境提供了 App() 构造器用来注册一个程序App，我们可以在app.js页面进行注册，在其他的 js 脚本中可以通过getApp()来获取程序实例。

app.js

通过App()注册小程序，接收Object类型参数，指定生命周期回调函数，也可指定全局数据，其他页面通过getApp()来获取数据。

App({
  globalData: '全局数据',
  // 初始化完成时触发，全局只触发一次
  async onLaunch(e) { 
  },
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onShow() {
  },
  // 小程序从前台进入后台，触发 onHide
  onHide() {
  },
  // 当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息
  onError() {
  },
});

其他页面获取app.js中定义的全局数据

const app = getApp();
console.log(app.globalData);

app.json

当前小程序的全局配置，包括了所有页面路径、标题栏显示、网络超时时间、底部 tab 等。

完整配置项

{
    // 小程序的默认启动路径，如果不指定，则为 pages 里的第一项
    "entryPagePath": "pages/catlist/index",
    // 页面路径
    "pages": [
        "pages/catlist/index",
        ...
    ],
    // 分包路径
    "subPackages": [
      {
        "root": "common",
        "name": "common",
        "pages": [
          "pages/shareappmessage/index",
          "pages/scan/index"
        ]
      }
    ],
    // 小程序的状态栏、导航条、标题、窗口背景色
    "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "宠物乐园",
        "navigationBarTextStyle": "black"
    },
    // 多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面
    "tabBar": {
        "color": "#1485EE",
        "selectedColor": "#FF514E",
        "list": [
            {
                "pagePath": "pages/catlist/index",
                "text": "列表",
                "iconPath": "image/02.png",
                "selectedIconPath": "image/022.png"
            },
            {
                "pagePath": "pages/mycat/index",
                "text": "我的",
                "iconPath": "image/04.png",
                "selectedIconPath": "image/044.png"
            }
        ]
    },
    // 启用新版的程序样式
    "style": "v2",
    // 指定`sitemap.json`的位置，`sitemap.json`文件用于配置小程序及其页面是否允许被微信索引
    // https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
    "sitemapLocation": "sitemap.json"
}

app.wxss

全局的公共样式，详见pages中wxss模块的介绍

Pages 页面

一个小程序可以有多个页面，页面之间可相互跳转。在app.json文件中，pages配置项增加一个页面路径，小程序就会自动在pages目录下创建对应的文件夹，每一个pages下都包含wxml、wxss、js、json文件。

wxml

框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

  • 基础组件
    • view： 视图容器
    • text：文本
    • image：图片
    • input：输入框
    • button：按钮
    • textarea：长文本输入框
    • ...
  • 数据显示
    • {{xxx}}：数据绑定
    • wx:if、wx:elif、wx:else：条件渲染
    • wx:for：列表渲染
    • ...
  • 事件
    • bindtap：点击事件
    • bindinput：输入事件
    • bindtouchstart：手指触摸动作开始
    • bindtouchmove：手指触摸后移动
    • ...
  • 事件传递参数
    • data-xxx：绑定在组件上，事件时可通过 dataset拿到
<view class="add">
    <view class="add_title">
        <view class="add_title_size">姓名</view>
        <input
          bindinput="inputTitle"
          class="add_title_inp"
          placeholder="请输入宠物宝宝姓名"
          value="{{title}}"
          type="text"
        />
    </view>
    <view class="add_title">
        <view class="add_title_size">年龄</view>
        <slider
          value="{{age}}"
          min="1"
          max="20"
          show-value
          bindchange="updateAge"
        ></slider>
    </view>
    <view class="add_title">
        <view class="add_title_size">品种</view>
        <picker
          header-text="请选择品种"
          range="{{kindList}}"
          value="{{kindValue}}"
          bindchange="selectKind"
        >
          {{ kindValue === null ? '请选择' : kindList[kindValue]}}
        </picker>
    </view>
    <view class="add_content">
        <view class="add_content_title">描述</view>
        <view class="add_content_main">
            <textarea
             class="add_content_main_text"
              bindinput="bindinput"
              placeholder="{{textarea}}"
              value="{{value}}"
            />
        </view>
    </view>
    <view class="add_title">
        <view class="add_title_size">是否可见</view>
        <view class="add_title_switch">
          <switch
            color="rgba(24, 144, 255, 100)"
            checked="{{visible}}"
            bindchange="updateVisible"
          />
        </view>
    </view>
    <view class="add_button" bindtap="createCat">
        保存
    </view>
</view>

wxss

样式语言，具有css大部分的特性，wxss在css基础上做了一些扩充和修改。

  • 尺寸单位

    新增尺寸单位rpx，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

    image.png

  • 样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

@import "common.wxss";

javascript

提供Page()构造器来注册页面，指定页面的初始数据、生命周期回调、事件处理函数等。

提供以下生命周期回调：

  • onLoad：页面创建时执行
  • onShow：页面出现在前台时执行
  • onReady：页面首次渲染完毕时执行
  • onHide: 页面从前台变为后台时执行
  • onUnload: 页面销毁时执行
  • onPullDownRefresh: 触发下拉刷新时执行
  • onReachBottom: 页面触底时执行
  • onShareAppMessage: 页面被用户分享时执行
  • onPageScroll: 页面滚动时执行
  • onResize: 页面尺寸变化时执行
  • onTabItemTap：tab 点击时执行
Page({

    /**
     * 页面数据
     */
    data: {
        id: '',
        title: "",
        kindValue: null,
        age: 1,
        value: '',
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 设置小程序标题
      wx.setNavigationBarTitle({
        title: '添加宠物宝宝',
      })
      if (options) {
        const catList = JSON.parse(wx.getStorageSync('catList'));
        const item = catList.find(item => item.id === options.id);
        this.setData({
            id: options.id,
            title: item.name,
            age: item.age,
            kindValue: this.data.kindList.indexOf(item.kind),
            value: item.desc,
            visible: item.visible
        })
      }
    },
    // 对应`wxml`模板中的绑定事件
    updateAge(e) {
      this.setData({
        age: e.detail.value
      })
    },
    bindinput(e) {
        this.setData({
            value: e.detail.value
        })
    },
    // 通过currentTarget.dataset.id取绑定在 wxml模板上 data-xxx 的值
    editCat(item) {
        wx.navigateTo({
          url: `../addcat/index?id=${item.currentTarget.dataset.id}&edit=true`,
        });
      },
    ...生命周期函数
})

注意：修改 data 中的数据需要通过setData方法进行修改

this.setData({
    age: e.detail.value
})

json

可以通过app.json对全局的标题栏等进行配置，也可以对某一个页面进行配置。

完整配置项

  • navigationBarBackgroundColor：导航栏背景颜色
  • navigationBarTextStyle：导航栏标题颜色，仅支持 black / white
  • navigationBarTitleText：导航栏标题文字内容
  • navigationStyle：导航栏样式
  • enablePullDownRefresh：是否开启当前页面下拉刷新

小程序发布

开发过程中，我们可以通过微信开发者工具的『预览』和『真机调试』功能进行调试。

没问题后通过微信开发者工具的『上传』按钮进行代码上传。

image.png

image.png

上传时需要输入版本号和备注 image.png

上传成功后会出现上传成功的提示，还会出现如下的代码质量提示 image.png

有时还会出现如下上传失败的提示

image.png image.png

这时就需要进行分包优化，参考这里，分包优化后重新进行上传。

上传成功后，登录『微信公众平台』查看『版本管理』，就可以看到我们刚才上传的版本代码

image.png

开发阶段，可以选为体验版，微信扫码查看即可。

image.png

结语

到这里，小程序的一个小小的 demo 就完成了，但也仅仅只是入门，还是要在项目中才能够更深入了解和使用。

部分代码示意如下（代码片段无法实现微信小程序，只能看代码了）：

学习的路任重而道远，持续学习 ing!

image.png

参考文档

  1. mp.weixin.qq.com/wxamp/home/…
  2. developers.weixin.qq.com/miniprogram…
  3. developers.weixin.qq.com/ebook?actio…
  4. developers.weixin.qq.com/miniprogram…
  5. git.weixin.qq.com/
avatar
文章
阅读
粉丝