微信小程序「进阶二」

宁静_致远
292 阅读5分钟

一、知识储备

由于小程序基于网页技术，所以学习之前，最好懂一点网页开发，下面两方面的知识是必需的：

（1）javascript语言：懂基本语法，会写简单的 JS 脚本程序。

（2）CSS 样式：理解如何使用 CSS 控制网页元素的外观。

此外，虽然 HTML 标签和浏览器 API 不是必备知识，但是了解浏览器怎么渲染网页，对于理解小程序模型有很大的帮助，总的来说，先学网页开发，再学小程序，是比较合理的学习途径，而且网页开发的资料比较多，遇到问题容易查到解决方法。但是，网页开发要学的东西太多，不是短期能掌握的，如果想快速上手，先学小程序，遇到不懂的地方再去查资料，也未尝不可。

1. javascript（以下是推荐的一些网络资源）

官方文档：

  • MDN Web Docs: 由Mozilla维护的JavaScript文档，内容详尽，涵盖了JavaScript的各个方面。

在线教程

书籍

  • 《JavaScript权威指南》: 被称为JavaScript的“圣经”，适合深入学习。
  • 《你不知道的JavaScript》: 系列书籍，深入探讨JavaScript的各个方面。

社区和论坛

  • Stack Overflow: 一个问答社区，可以在这里找到很多JavaScript相关的问题和答案。
  • Reddit - r/javascript: 一个讨论JavaScript的社区，可以在这里找到最新的趋势和讨论。

实践项目

  • FreeCodeCamp: 提供大量的实践项目，通过做项目来学习JavaScript。
  • LeetCode: 提供编程挑战，可以用JavaScript来解决问题，提升编程能力。

通过这些资源，你可以系统地学习JavaScript，从基础到高级，逐步提升自己的编程能力。

2. css （以下是推荐的一些网络资源）

官方文档

  • MDN Web Docs: 由Mozilla维护的CSS文档，内容详尽，涵盖了CSS的各个方面。

在线教程

书籍

  • 《CSS权威指南》: 被称为CSS的“圣经”，适合深入学习。
  • 《CSS揭秘》: 提供了很多实用的CSS技巧和方法，适合进阶学习者。

社区和论坛

  • Stack Overflow: 一个问答社区，可以在这里找到很多CSS相关的问题和答案。
  • Reddit - r/css: 一个讨论CSS的社区，可以在这里找到最新的趋势和讨论。

实践项目

  • FreeCodeCamp: 提供大量的实践项目，通过做项目来学习CSS。
  • CodePen: 一个在线代码编辑器，可以用来编写和分享HTML、CSS和JavaScript代码，适合练习和展示CSS技巧。 通过这些资源，你可以系统地学习CSS，从基础到高级，逐步提升自己的样式设计能力。

二、开发准备

1. 申请APPId（这个是免费的）

image.png 你会得到一个 AppID（小程序编号） 和 AppSecret（小程序密钥），后面都会用到以上就是大佬们申请的小程序测试号了，话不多说进行下一步；

2. 下载小程序开发工具

image.png 我安装的是MacOS版的，可以根据自己需求下载安装

  • 安装完之后就可以了登录了：我这里已经登入了就不再演示（微信扫一扫） image.png
  • 登录后，进入新建项目的页面，可以新建不同的项目 image.png
  • 点击+号新建小程序页面 输入上面申请的APPId：wx0de61e0621f45a9e image.png 如果直接新建小程序，会生成一个完整的项目脚手架。对于初学者来说，这样反而不利于掌握各个文件的作用。更好的学习方法是，自己从头手写每一行代码，然后切换到"导入项目"的选项，将其导入到开发者工具
  • 新建一个文件夹起一个名字如：hello-wx image.png 点击创建，接下来就是小程序用例了；

三、小程序用例

  • 第一步： 新建一个脚本文件app.js，这个脚本用于对整个小程序进行初始化； app.js 内容只有一行代码。
/** 表示新建一个小程序实例 */
App({})
  • 第二步： 新建一个配置文件app.json，记录项目的一些静态配置； app.json必须有一个pages属性，指明小程序包含哪些页面。
{
  "pages": [
    "pages/home/home"
  ]
}
  • 第三步：在home目录下新建home.js文件，内容如下：
/** 初始化一个页面实例 */
Page({});
  • 第四步：在home目录下新建一个：home.wxml文件 内容很简单如下：
<view>
  <text>hello world</text>
</view>
  • 第五步：在home目录下新建一个：home.wxss文件，简单写一下样式
.home-wrap {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title {
  color: blue;
}
  • 页面效果

image.png

四、项目结构

总结一下，这个示例一共有4个文件：

|- app.json
|- app.js
|- pages
   |- home
      |- home.wxml
      |- home.json
      |- home.wxml
      |- home.wxss

到这就是一个完整的小程序示例了，

五、项目配置文件app.json

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。hello-wx 项目里边的 app.json 配置内容如下：

{
  "pages":[
    "pages/home/home",
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}

我们简单说一下这个配置各个项的含义:

  1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

其他配置项细节可以参考文档 小程序的配置 app.json

六、结尾

哈哈，看到这里说明你对微信小程序感兴趣，今天就先到这吧，也是第一次写，有什么不足欢迎大佬们评论；

avatar
文章
阅读
粉丝