Skip to content

开始

https://developers.weixin.qq.com/miniprogram/dev/framework/

小程序开发起步:
https://developers.weixin.qq.com/community/business/course/000264e20a0dd8e69669b609451c0d

我的小程序:
gh_5832c7bc6]986

小程序首页:
https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1614927842

小程序基本信息:
可以看到 appID
https://mp.weixin.qq.com/wxamp/basicprofile/index?token=1614927842&lang=zh_CN

文档，资源

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

awesome:
https://github.com/justjavac/awesome-wechat-weapp

icon:
https://www.iconfont.cn/collections/detail?spm=a313x.search_index.0.da5a778a4.3bf33a81S3lmfC&cid=317

下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

新建小程序

不使用云服务

版本管理

https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1614927842&lang=zh_CN

可以先设置为体验版，就能看到体验版二维码

体验版没问题之后可以提交审核

项目结构

微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构

  • pages: 用于存放微信小程序的所有页面
  • .eslintrc.js: 用于格式化代码，使代码风格保持一致
  • app.js: 微信小程序的入口文件，用于描述微信小程序的整体逻辑
  • app.json: 微信小程序的全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等
  • app.wxss: 微信小程序的全局样式文件，文件可以为空
  • project.config.json: 在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要载入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置
  • project.private.config.json: 用于保存微信开发者工具的私人配置，配置的优先级高于 project.config.json
  • sitemap.json: 用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认所有页面都允许被索引。 微信现已开放微信小程序页面的搜索，也就是说微信小程序里面的内容也能被微信搜索引擎搜索到。 当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。 当用户的搜索词触发该索引时，微信小程序的链接地址将可能展示在搜索结果中

微信客户端在启动小程序时，首先会把整个小程序的代码包下载到本地；
然后解析 app.json 全局配置文件，通过该文件解析出微信小程序的所有页面路径；
接着执行 app.js 入口文件，调用 App() 函数创建微信小程序的实例；
最后渲染微信小程序的首页

微信小程序的页面组成

一个微信小程序是由一个或多个页面组成的，这些页面被存放在 pages 目录中。
下面以 pages 目录下的 index 页面为例展示其组成部分

index 页面由 4 个文件组成，分别是 index.js、index.json、index.wxml 和 index.wxss

微信小程序页面的 JS、JSON、WXML 和 WXSS 语言编写，关于这 4 种语言的说明如下。

  • JS: 类似网页制作中的 JavaScript 语言，用于实现页面逻辑和交互，文件扩展名为 .js。 需要注意的是，微信小程序中的 JS 不含 DOM 和 BOM，但它提供了丰富的 API，可以实现许多特殊的功能，例如 微信登录、音频播放、文件上传等。
  • JSON(JavaScript Object Notation, JavaScript 对象符号): 用于利用 JSON 语法对页面进行配置，文件扩展名为 .json。
  • WXML(WeXin Markup Language, 微信标记语言): 类似于网页制作中的 HTML 语言，用于构建页面结构，文件扩展名为 .wxml
  • WXSS(WeXin Style Sheets, 微信样式表): 类似于网页制作中的 CSS 语言，用于设置页面样式，文件扩展名为 .wxss

微信客户端在加载微信小程序页面时，首先读取并解析页面中 JSON 文件的配置；
然后加载页面的 WXML 文件、WXSS 文件和 S 文件，实现页面渲染。
其中，页面中 WXSS 文件的样式会覆盖项目根目录下的 app.wxss 文件中相同的全局样式；
页面中 JS 文件的 Page() 函数会被调用，用于创建页面实例

开发者工具的使用

调试器

调试器类似于 Chrome 浏览器中的微信开发者工具。下面对调试器中常用面板的功能进行简要介绍。

  • Wxml: Wxml 面板，用于查看和调试 WXML 和 WXSS
  • Console: 控制台面板，用于输出调试信息，也可以直接编写代码执行
  • Sources: 源代码面板，用于显示当前项目的脚本文件，在该面板中开发者看到的文件是经过处理之后的脚本文件
  • Network: 网络面板，用于记录网络请求和响应信息，根据它可以进行网络性能优化
  • AppData: App 数据面板，用于查看或编辑当前微信小程序运行时的数据
  • Storage: 存储面板，用于模拟地理位置、重力感应
  • Security: 安全面板，用于调试页面的安全和认证等信息
  • Trace: 跟踪面板，用于真机调试时跟踪调试信息

WXML 简介

在制作微信小程序页面时，页面的结构可以用 WXML 来实现。
WXML 是微信团队为微信小程序开发而设计的一套语言，可以结合微信小程序中的各种组件构建页面结构。

虽然 WXML 和 HTML 都可以用于搭建页面结构，但是它们本质上是不同的，在使用 WXML 时，应该注意以下 5 点:

  • HTML 和 WXML 使用的标签不同。例如，HTML 经常使用 <div> 标签搭建页面结构，而 WXML 则使用 <view> 标签搭建页面结构；HTML 经常使用 <span> 标签定义行内文本，而 WXML 则使用 <text> 标签定义行内文本
  • WXMLL 提供了和 Vue.js 中模板语法类似的模板语法，例如数据绑定、列表渲染、条件渲染等，而 HTML 没有
  • HTML 页面可以在浏览器中预览，而 WXML 页面仅能在微信客户端和微信开发者工具中预览。
  • WXML 中的单标签必须在结尾 ">" 前面加上 "/"，否则微信开发者工具会报语法错误，而 HTML 中允许省略单标签 ">" 前面的 "/"。
  • WXML 所使用的标签是微信小程序定义的标签，应避免使用 HTML 标签，这样才能保证页面被正确转译

使用微信开发者工具开发时，在 WXML 中编写的一些 HTML 标签仍会被正常解析，这会给开发者造成一种微信小程序能直接支持 HTML 标签的误解。
由于微信开发者工具采用了浏览器内核，同时微信小程序框架并没有对 WXML 中的标签和 WXSS 中的内容进行强验证，所以 HTML 和 CSS 可以直接被解析，但是不会像浏览器一样正常显示。
例如，HTML 中的 <img> 标签在微信小程序中无法正常显示成图片，应使用微信小程序提供的 <image> 标签来显示图片，所以应该尽量避免在 WXML 中使用 HTML 标签。

WXSS 简介

在网页制作中，使用 HTML 搭建页面结构以后，还需要使用 CSS 美化样式。
同样，在微信小程序的页面制作中，使用 WXMLL 搭建页面结构以后，也需要设置样式来美化页面。
微信小程序提供了一套类似 CSS 的语言 WXSS，通过 WXSS 可以美化页面样式。

为了适应广大的前端开发者，WXSS 具有 CSS 的大部分特性，同时为了更适合微信小程序的开发，WXSS 在 CSS 基础上做了一些扩充和修改。
WXSS 和 CSS 的区别主要有以下 3 个方面。

  • 不同的手机屏幕分辨率不同哦，如果用 CSS 中的 px 单位，会遇到屏幕适配的问题，需要手动进行像素单位换算。而微信小程序提供了一个新的单位 rpx，使用 rpx 单位可以很轻松地适配各种手机屏幕
  • 在微信小程序中，项目根目录中的 app.wxss 文件作为全局样式，会作用于当前微信小程序的所有页面，而局部页面的 WXSS 样式仅对当前页面生效，CSS 则没有这样的功能
  • 在 WXSS 中设置背景图片的时候，可以使用网络图片或者以 Base64 格式编码的图片，不能使用本地图片，而 CSS 可以使用本地图片来设置背景图片

页面路径配置

开发一个功能完整的微信小程序时，一般需要制作多个页面。
在微信小程序中可以通过 app.json 全局配置文件中的 pages 配置项来配置微信小程序的页面路径。
pages 配置项是一个数组，该数组用于指定微信小程序由哪些页面组成，数组中的每一个元素都对应一个页面的路径信息。
下面通过代码演示如何配置页面路径: 

1
2
3
4
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

上述代码中共配置了两个页面，分别是 pages/nidex/index 页面和 pages/logs/logs 页面。
默认情况下，pages 数组中的第一项为微信小程序的初始页面，即 pages/index/index 页面。
如果想将其他页面设置为初始页面，可以手动调整数组中元素的顺序，将需要设为初始页面的页面路径设为第一项即可

如果需要在微信小程序中创建一个新的页面，可以在 app.json 文件的 pages 数组中增加一项新页面的信息，微信开发者工具会创建对应的页面。
除了修改 pages 数组外，还可以通过在微信开发者工具的项目资源管理器的 pages 目录下右键单击鼠标，选择 "新建 Page" 来创建页面，微信开发者工具会自动在 app.json 文件中添加对应的路径。
需要注意的是，如果对页面文件直接进行删除操作，则不会触发代码的自动更新效果，需要手动修改 app.json 文件中的 pages 数组

view 组件

在 HTML 中，<div> 标签可以定义文档中的分区或节，把文档分割为独立的、不同的部分，
在 WXML 中，view 组件起着类似的作用。view 组件表示视图容器，常用于实现页面的布局效果

view 组件通过 <view> 标签定义，示例代码如下: 

1
<view>view组件</view>

初始化代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="{{canIUseOpenData}}">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.usermotto {
  margin-top: 200px;
}

版本审核

正常的账号在100分的情况下审核时间都会在2个小时内。 晚上 8 点多申请，第二天 9 点还没通过