微信小程序开发学习与问题解决（个人简历展示）

文章用于学习记录

---

前言

---

一、效果展示

• 个人简历微信小程序页面展示
• 参考（下）开发一款微信小程序的个性简历，能打开大厂之门并获得门票？（附源码）

二、准备工作

• 注册微信小程序，获取小程序的 AppID；
  

• 点击（开发管理-开发设置）就可以看到小程序的 AppID

• 下载并安装微信开发者工具；
  

• 根据工具提示点击下一步，完成安装，安装成功后，打开小程序开发工具，使用之前注册小程序所使用的微信扫码登录，点击新建项目填入 AppID，第一个小程序项目就创建成功了。

三、代码组成

• 小程序由配置代码 JSON 配置文件、模板代码 WXML 文件、样式代码 WXSS 文件以及逻辑代码 JavaScript 文件组成。
• page 是用来描述页面的，一个页面由四个文件组成，以 index 为例，每一个小程序页面是由同路径下同名的四个不同后缀文件组成，如 index.js，index.wxml，index.wxss，index.json。
• .js 后缀的是脚本文件，.json 后缀的是配置文件，.wxss 后缀的是样式表文件，.wxml 后缀的是页面结构文件。

  │  app.js                  // 小程序逻辑    
  │  app.json                // 小程序公共配置
  │  app.wxss                // 小程序公共样式表
  │  project.config.json     // 项目配置文件
  │  sitemap.json            // 页面收录配置文件
  ├─images                   // 公共图片存放文件夹
  ├─pages                    // 注册页面文件夹
  │  ├─index                 // 工作经验页面
  │  │      index.js         // 页面逻辑
  │  │      index.json       // 页面配置
  │  │      index.wxml       // 页面结构  
  │  │      index.wxss       // 页面样式表  
  

• 一个小程序包含一个 app (主体部分)和多个 page (页面)。
• app.js 是用来描述整体程序的，由三个文件组成，.js 后缀的是脚本文件，.json 后缀的是配置文件，.wxss 后缀的是样式表文件，必须放在项目的根目录。

3.1 JSON 配置

• JSON 是一种数据格式，在小程序中扮演的静态配置的角色。（JSON 文件中无法使用注释！）

• JSON 的值只能是以下几种数据格式：

   数字，包含浮点数和整数
   字符串，需要包裹在双引号中
   Bool值，true 或者 false
   数组，需要包裹在方括号中 []
   对象，需要包裹在大括号中 {}
   Null
  

  

• app.json 是对整个小程序的全局配置，决定页面文件的路径、窗口表现、设置网络超时间，设置多tab等。

• 微信小程序中的每个页面（路径+页面名）都需要写在 app.json 的pages中，且在 pages 中的第一个页面是小程序的首页。

  {
      "pages": [
          "pages/index/index"
      ],
      "window": {
          "backgroundTextStyle": "light",
          "navigationBarBackgroundColor": "#fff",
          "navigationBarTitleText": "Weixin",
          "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
  }
  

3.2 WXML 模板

• WXML 文件后缀名是 .wxml ，是页面结构文件，在语法上同 HTML 非常相似。
  

3.3 WXSS 样式

• WXSS 是描述 WXML 的组件样式，也就是视觉上的效果，与 Web 开发中的 CSS 类似。
• app.wxss是整个小程序的公共样式表

  /**app.wxss**/
  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 200rpx 0;
    box-sizing: border-box;
  } 
  

3.4 JS 脚本文件

• app.js 是小程序的脚本代码，可以在这个文件中监听并处理小程序的生命周期函数、声明全局委量，调用框架提供的丰富的 API。

四、跳转 web-view 问题解决

• 参考【小程序】- web-view不支持打开非业务域名如何解决
  
  

• 解决办法：服务器域名配置

   登录微信公众平台-开发-开发设置-服务器域名
   未配置的页面如下：点击“开始配置”-微信扫码登录-添加域名即可
  

  

• 配置成功后打开开发工具，点击右侧“详情”-“项目配置”，可以看到在小程序的管理后台配置的服务器域名，如下图所示：
  

• 本地测试业务域名设置

• 如果只是在本地测试使用 web view 访问网页，可以通过在开发工具中-右侧“详情”-点击“本地设置”-勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”，

• 然后重新编译项目可以成功访问，具体操作如下图所示：

  

五、上传审核与发布

• 完成开发后在工具栏右上角点击上传按钮提交代码，按提示框完成操作即可。
  

• 登录小程序后台 - 版本管理 - 开发版本 - 提交审核（按提示完成操作）；

• 提交成功后，等待审核，再审核版本会看到审核状态，请随时关注审核结果；

• 如果审核通过后，审核版本一栏会出现可发布按钮。点击发布上线后，上线版本一栏会显示，如图所示：

  

• 下载小程序码
  

六、正式发布 web-view 问题解决

• 在正式发布的小程序中仍存在页面打不开的情况，参考不支持打开非业务域名https://mp.weixin.qq.com，请重新配置？中的回答可解决。
  
  
  

---

总结

以上就是个人简历小程序页面效果展示，微信小程序开发的准备工作、代码组成、问题解决以及审核发布过程。