从0开始学习开发微信小程序

准备工作

下载安装微信开发者工具、注册小程序账号

创建小程序

实际操作学习基本功能

写一个名为new的页面。

修改主页的“Hello World”内容

尝试在主页昵称下面显示我们的国家、地区等信息

写一个button按钮，点击按钮跳转到新页面

写一个返回按钮，了解栈和重定向的概念

从0开始学习开发微信小程序

准备工作

下载安装微信开发者工具、注册小程序账号

首先就是做微信小程序开发，我们需要下载一个微信开发者工具，以及注册一个小程序账号。前期相关工作我们直接去微信官方文档里面去找就可以：首页 | 微信开放社区微信开放文档首页 | 微信开放社区

无论是下载开发者工具，还是申请账号，都能在文档里面找到。

没必要安装在C盘，我安装在了D盘中，也是可以正常运行的，这里我安装的是7.21日更新的1.06版本（wechat_devtools_1.06.2207210_win32_x64）。代码存储在了E盘，我写的代码统一放入GitHub_codebase文件夹中，最近做小程序，所有的代码都保存在其子文件夹miniprogram中。

创建小程序

创建一个小程序，按照我们预先设定好的文件路径，不知道AppID可以登录微信公众平台的后台设置里找，前期练习不使用云服务，下面三个模板进去模拟器展示是一样的（昵称、头像、hello world），我们用java语言，选择JavaScript模板。

加载进去就是这样的界面。pages里面是我们的各个页面，utils里是一些工具，下面还有我们项目的配置文件和工程的配置文件。顶部的功能左半边很好懂，小程序模式也不用变，点普通编译可以添加编译模式，左边的模拟器就会直接显示我们编译的内容，真机调试可以生成二维码，我们可以用手机扫描之后在手机上预览效果。

小程序中资源管理器的目录结构和我们本地存储的目录结构是一样的，可以看到默认有两个页面，index和logs，index就是我们默认看到的主页，logs页面是日志页面，点击头像会进入。.js文件和数据、动作相关，控制我们页面的生命周期及处理事件；.json是页面的配置数据，比如配置一些组件；.wxml文件是页面里的一些标签，相当于html，把这也的代码都删除，页面也就显示空白了；.wxss文件相当于css，设定页面标签的样式。我们每写一个页面都会包含这四种文件。

实际操作学习基本功能

先尝试写一个新的页面，修改主页的“Hello World”内容，并且试一试能否在主页昵称下面显示我们的国家、地区等信息，写一个按钮跳转到新的页面。

写一个名为new的页面。

普通编译模式默认展示的是最上面一行代码的页面，也就是index，如果不想调换代码顺序展示我们所写的页面，就要去添加编译模式，启动页面选择想展示的页面。

默认显示的是文件路径和文件名。

在.wxml文件中，可以修改显示的内容，比如改为new。

接下来我们想改变文字的位置、样式，就需要去css文件中改，如果想做居中效果，要把text标签换成view，前者是文本多大标签就占多大，后者是标签会占满正行，所以可以设置居中效果。再给这个标签定义一个类，名为title，后面在css文件中就可以引用这个类，修改该标签的样式。

敲代码需要用英文输入法，尤其注意标点符号。ctrl+斜杠键可以给代码添加注释。

用类选择器（.点）引用我们定义的类，调整字体样式。如调整字体像素为36rpx，颜色为coral，居中。字体单位有两种，rpx是微信里定义的像素尺寸，也可以用px，颜色的话有rgb也可以设置，精确设置自己想要的颜色。

如果不想居中，只是想保持一定的页边距，也可以用margin-left后面输入像素值，来调节左侧的页边距。这些属性样式调整的知识就是css，我们可以学习W3school的css手册：CSS 参考手册，如果想要系统学习，一周也只能学一个大概，这里面有很多东西。

文本数据new我们最好写道.js文件里，因为如果遇到一组数据轮流展示，我们就可以用数值来控制展示想展示的内容。我们命名它为content（内容），在js里写它的数据。引用data里的数据用双大括号，写数据用冒号、双引号。

修改主页的“Hello World”内容

需要先找到控制显示“Hello World”的代码。数据都是在js文件里写的，直接看index.js文件中的data数据，motto的值就是“Hello World”，直接在这里修改数据即可。

在index.wxml中注掉motto的相关代码，编译，“Hello World”也会消失。

在js中将motto的值改为我们想要的内容即可。

尝试在主页昵称下面显示我们的国家、地区等信息

主页默认显示我们的头像、昵称，如何显示出我们的国家、地区、语言等信息？

data数据内容太太复杂，看不懂。

可以在index.wxml中尝试找出控制昵称显示的代码，注掉这几行代码，头像消失。

注掉这行代码，昵称消失。open-data帮我们获取了头像和昵称。

block表示一块儿区域的内容，有一个if函数控制着它。

那么怎么用open-data获取显示一下省份等内容呢？我们先了解一下它的功能，在开放文档中搜索open-data。

可以看到它有很多类型，我们尝试显示一下用户所在国家，复制userCountry，加入一行代码。

保存编译，并未显示国家，哪里出了问题呢？

尝试给这行代码加上个view标签，在js数据中也按照格式添加 && wx.canIUse('open-data.type.userCountry' 代码，结果都没有反应。

应该只需要加 <open-data type="userCountry"></open-data> 这一行代码就可以显示用户国家，这一点在开放者文档的示例代码中可以看得很清晰，哪里出了问题呢？

在底部的相关问答中，我找到了答案。

微信公众平台用户信息相关接口调整公告 | 微信开放社区

去年的小程序公告里，开发者获取用户性别、地区、语言等权限就被回收了。

可以在相关问答中找到我们对代码不理解的地方，多专注小程序公告，及时填补信息差。

写一个button按钮，点击按钮跳转到新页面

开发者可以添加编译模式看到新页面，用户怎么办呢？

我们需要写一个按钮，进行跳转。

比如跳转到背单词页面，用button自带的size属性可以定义按钮大小。

在css中调一下motto的段前距，默认是200px，太靠下了，改为30px。

给按钮定义一个类，再次调节motto和button的段前距，效果如下。

按钮的大小只有两个合法值，不能通过修改数值随意改变。

按钮的样式类型有三种，主要是颜色不同，可以选择是否镂空。

开放文档中给出的属性，直接在wxml里定义修改就可以。

点击按钮如何跳转到新页面呢？需要写一个bindtap，给它绑定一个事件。比如将事件定义为"bindTapNew"。

注意要到index.js中，写一个函数，定义要跳转到的页面。按照上面的点击头像跳转到日志页面的写法就可以，“..”代表上一级目录，“.”代表本级目录。

点击背单词按钮就可以跳转到新页面了。

写一个返回按钮，了解栈和重定向的概念

注意看上图跳转到新页面后，左上角有一个返回的按钮标识，点击可以返回主页。这是因为navigateTo跳转有一个记录访问历史的栈，所以有返回的效果。

我们尝试自己写一个返回按钮，回到主页。

定义一个点击事件。

在new.js文件中写函数。function：函数，在这里写不写都可。

wx是一个核心对象，里面封装了很多关于页面的信息。

保存编译后，我们连续点击返回、背单词按钮，跳转10次就会出现错误。 {"errMsg":"navigateTo:fail webview count limit exceed"}

点击一下Clear console按钮或连续点几次左上角的返回按钮，我们又可以点击自己写的按钮跳转了，这是为什么？

这是因为navigateTo自带的返回效果，遵循栈的规则：先进后出。每点击一次跳转按钮都会在栈里增加一条记录，这个栈存满了就无法跳转了，点击后退按钮会清楚一条栈的记录，就又可以点击跳转按钮了。这有点像我们浏览网页跳转各种链接，网页的链接的栈没有限度，而这个栈是有限度的。

我们换一种跳转页面的方法;：redirectTo，重定向到某一页面。这里是在new.js中改的，不用改index.js中的navigateTo，就可以达到无限跳转的效果。

最好两个js都改一下，一个遵循栈，一个不遵循栈有些乱。有一个navigateTo左上角就会一直有后退按钮，但是每次重定向跳转又会让栈失去记录，所以后退按钮失去了意义。

本期内容是非常基础的微信小程序开发入门知识，适合0小程序开发基础的朋友学习，后面的内容会不断深入，开发出功能性更强的小程序。