微信小程序入门开发指南

2020-12-08 18:12:11 浏览数 (1)

小程序简介

小程序是一种不需要下载安装即可使用的应用,它是连接用户与服务的新方式,它实现了应用“触手可及” 的梦想。

用户扫一扫或者搜一下即可打开应用,也体现了“用完即走”的理念。

用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又“无需安装下载”

此篇是微信小程序开发的一个简明介绍和关键说明,微信小程序的主要开发语言是 JavaScript,如果你使用过 Vue 或者 React,你将会对微信小程序的开发有一种亲切感,它们的一些理念有一些类似,比如数据绑定、数据驱动视图等。

准备工作

  • 注册小程序账号 注册地址
  • 获取AppID 位于小程序管理平台的菜单 “开发”-“开发设置”
  • 安装小程序开发工具 下载地址
  • 配置项目

1. 打开小程序开发者工具,用微信扫码登录开发者工具

2. 新建项目

3. 选择小程序项目

4. 选择本地存放路径

5. 填写上面获取到的AppID

6.完成项目创建

一些重要的概念

  1. 小程序的组成 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
  2. 一个小程序主体部分由三个文件组成,必须放在项目的根目录:
    • app.js —— 小程序逻辑
    • app.json —— 小程序公共配置
    • app.wxss —— 小程序公共样式表

3. 一个小程序页面由四个文件组成:

  • .js文件 —— 页面逻辑
  • .wxml文件 —— 页面结构
  • .json文件 —— 页面配置
  • .wxss文件 —— 页面样式表

4. 最终,一个小程序的基本目录结构,大致长这个样子:

代码语言:txt复制
|—pages/
|   |—about/
|      |—about.js
|      |—about.json
|      |—about.wxml
|      |—about.wxss
|—app.js
|—app.json
|—app.wxss
|—project.config.js // 工具配置,存放开发者对开发工具的一些个性化配置,例如界面颜色、编译配置等

5. 宿主环境 每个小程序都是运行在它所在的微信客户端上的,通过微信客户端给他提供的运行环境,小程序可以直接获取微信客户端的原生体验和原生能力。

6. 基本架构 小程序的运行环境分为渲染层和逻辑层,其中 WXML 模板和 WXSS 样式工作在渲染层,JS 脚本工作在逻辑层。其中渲染层的界面使用 WebView 线程进行渲染,逻辑层采用 jsCore 线程运行。一个小程序存在多个界面,所以渲染层存在多个 WebView 线程,这两个线程的通信会经由微信客户端(Native)做中转,逻辑层发送网络请求也经由 Native 转发。

小程序语法

  • WXML 语法参考
  • WXS 语法参考

小程序发布流程

  1. 在开发工具里,提交代码,填写版本信息
  2. 在小程序管理平台提交审核
  3. 收到审核通过通知后,在小程序管理平台,点击发布
  4. 小程序将会发布到线上提供服务,可以下载二维码让别人扫码使用了

0 人点赞