您的位置: 首页  >  文章  >  小程序开发之基础入门指引

小程序开发之基础入门指引

分类: 文章 • 2024-11-19 11:49:57

为什么80%的码农都做不了架构师？>>>   小程序开发之基础入门指引

1. 起步

1.1. 申请账号

地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1

注册所填写信息：

  • 邮箱
  • 身份证姓名
  • 身份证号（一个身份证号码只能注册5个小程序）
  • 手机号（一个手机号码只能注册5个小程序）
  • 扫码绑定一个微信账号为管理者

不同主体类型间的区别如下：

小程序开发之基础入门指引

如何选择主体类型，参加官方说明。

注册成功后进入后台，通过菜单“设置 - 开发设置”得到小程序对应的 AppID（小程序身份标识），同时后台拥有的其它功能如：管理小程序权限、查看数据报表、发布小程序等。

1.2. 安装开发者工具

下载地址：

该工具集成了公众号网页调试和小程序调试两种开发模式：

  • 使用公众号网页调试，开发者可以调试微信网页授权和微信 JS-SDK 等功能。 详情
  • 使用小程序调试，开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

关于该工具的详细介绍，请点击这里。

1.3. Hello World

  1. 打开开发者工具，选择小程序；

  2. 项目配置：

    小程序开发之基础入门指引

  3. 查看效果

    小程序开发之基础入门指引

    在左侧的模拟器中，单击“获取头像昵称”，将得到当前开发者工具已登录微信账号对应的头像、昵称。

    注意：因为没有填写 AppID，所以开发者工具有一些功能限制，比如上图右上角中“预览”、“远程调试”等按钮是灰色。

2. 基本项目结构

通过上一步创建的快速预览项目，我们可以看到，小程序主要由 *.json、*.js、*.wxss、*.wxml 四类文件组成，详细的说明见下文。

2.1. json

文件扩展名：*.json

主要实现一些静态配置的功能，分为以下 3 类：

  • 根目录下的 app.json

    对当前小程序的全局配置，包括：所有页面路径、界面表现、网络超时时间、底部 tab 等，详见这里。

  • 根目录下的 project.config.json

    对当前开发者工具的配置，界面颜色、编译配置等，详见这里。

  • [page].json

    存在于每个页面（模块）对应的目录底下，用于配置每个页面的独立属性，详见这里。

2.2. wxml

文件扩展名：*.wxml

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。其相当于 HTML，但是在 div、p、span 这些标签的基础上，做了一些封装，添加了一些类似 wx:if 的属性表达式等，以实现更多的功能，详见这里。

基本特性简介：

  • 由开始标签和结束标签组成，而且必须严格闭合，比如 <view></view>；

  • 标签可以拥有属性，格式 key="value"，大小写敏感；

    所有组件的共同属性如下：

    小程序开发之基础入门指引

  • 数据绑定功能，通过 {{变量名}} 来绑定 wxml 文件对应 js 文件中的 data 对象属性；

    • 变量名大小写敏感；
    • 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中；

  • 在 {{ }} 内进行简单的逻辑运算

  • 条件逻辑 wx:if="{{condition}}"

  • 列表渲染 wx:for="{{array}}"

  • 模版 <template name="">...</template>

  • 引用其它文件

    • import
    • include

2.3. wxss

文件扩展名：*.wxss

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，相当于 CSS，但是做了一些扩充和修改，详见这里：

  • 根目录下 app.wxss 为项目公共样式，各页面共用，其它 *.wxss 适用于具体页面；

  • 新增了尺寸单位 rpx（responsive pixel）;

    rpx 的换算是以 375 个物理像素为基准，也就是在一个宽度为 375 物理像素的屏幕下，1rpx = 1px。 推荐以 iPhone6 屏幕（宽度为 375px，共 750 个物理像素）为设计基准，此时 1rpx = 375 / 750px = 0.5px

  • 引用其它样式文件 @import './test.wxss'

  • 仅支持部分 CSS 选择器：

    小程序开发之基础入门指引

  • 样式的权重遇 CSS 类似，从大到小为 !important > style="" > #id > .class > element

  • 官方样式库：https://github.com/Tencent/weui-wxss

2.4. js

文件扩展名：*.js

小程序的主要开发语言是 JavaScript ，开发者使用它响应用户操作、开发业务逻辑，以及调用小程序 API来完成业务需求。

ECMAScript 是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。

ECMA-262 规定了 ECMAScript 语言的几个重要组成部分：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 操作符
  • 对象

JavaScript 实现形式对比：

小程序开发之基础入门指引

小程序中的 JavaScript 是由 ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的 JavaScript 相比，没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto 这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和 NPM 包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

小程序的执行的入口文件是 app.js，并且会根据其中 require 的模块顺序决定文件的运行顺序。

当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行。

3. 执行流程

小程序开发之基础入门指引

说明：

  • 通过 app.json 中配置的第一个页面为小程序的首页。
  • 客户端装载页面代码，并通过底层一些机制，将页面渲染出来。

4. 发布

4.1. 设置用户身份

对于一个由团队开发的小程序项目，给每个参与人员设置不同的身份权限是十分必要的，通过后台菜单 用户身份 - 成员管理 进行设置，不同权限的区别如下：

小程序开发之基础入门指引

4.2. 测试预览

使用开发者工具，如下操作：

小程序开发之基础入门指引

提示：如果创建项目的时候，没有填写 AppID，该按钮是灰色不可用。

4.3. 上传代码及发布上线

同样通过开发者工具，单击右上角的“上传”按钮，确定上传并填写以下两个字段：

  • 版本号

    必填，仅限字母、数字，如 v1.0.0

  • 项目备注

    非必填，是对本次上传对特别说明信息。

上传成功后成为【开发版】，小程序管理员可在后台将本次上传设置为【体验版】，或提交审核成为【审核中版本】，审核通通过后，可发布小程序，成为【线上版】，具体流程如下：

小程序开发之基础入门指引

说明：

  1. 【开发版】只保留每人最新上传的一份代码，可随意删除，不影响审核版和线上版。
  2. 只能由一份代码处于【审核版】，有审核结果后，可发布上线或重新提交审核。
  3. 【线上版】会被每次发布的新版本覆盖。

可扫描下面的二维码，通过小程序开发者助手快捷的体验以上各版本。

小程序开发之基础入门指引

5. 其它

5.1. 查看小程序运营数据

  • 方式一：登录小程序管理后台，打开菜单“数据分析”；

  • 方式二：微信扫描下面对二维码，使用小程序数据助手工具

    小程序开发之基础入门指引

5.2. 相关资源

持续更新地址：https://github.com/whorusq/wechat-learning

转载于:https://my.oschina.net/antsky/blog/1793377

相关推荐