微信小程序开发笔记（二）第一个微信小程序

曾经终败给现在 2022-03-22 03:58 508阅读 0赞

参考教材：《微信小程序开发入门与实践》 雷磊  
前置知识：JavaScript，CSS

### 新建项目 ###

安装好`微信开发者工具`后，我们就可以开始新建我们第一个微信小程序了。  
选择新建项目，填入一个项目名称以及目录（即在磁盘上存放的路径），AppID这里如果没有申请，点击`测试号`系统会提供一个给你一个AppID，主要用于方便开发者学习和调试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70]  
在这里，我选择的是系统提供的默认AppID，确认无误后，点击右下角的`新建`，就生成了一个项目了。

### 界面显示及目录结构 ###

如下图，这就是小程序开发的主界面，分为左中右三个部分，左边部分是模拟器的预览视图，中间是代码的树状结构，右边是代码的编辑区。  
模拟器可以可以模拟微信小程序在客户端真实的运行情况，顶部有一条工具栏，你可以选择不同的机型、不同的网络情况、不同的缩放比例，以及home键模拟等等操作。  
中间是项目文件的树状管理器，可以整体预览项目文件和组织关系。  
右边是代码编辑区，不多赘述。  
右下角是信息输出区域，这个区域会显示程序运行的错误信息、警告信息以及用户自己打印的信息。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]

### 基本文件结构 ###

<table> 
 <thead> 
  <tr> 
   <th>文件</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>app.js</td> 
   <td>小程序的逻辑文件</td> 
  </tr> 
  <tr> 
   <td>app.json</td> 
   <td>小程序的配置文件</td> 
  </tr> 
  <tr> 
   <td>app.wxss</td> 
   <td>全局公共样式文件</td> 
  </tr> 
  <tr> 
   <td>project.congif.json</td> 
   <td>项目配置文件</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20190125180458890.png]

<table> 
 <thead> 
  <tr> 
   <th>文件类型</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>js</td> 
   <td>类似JavaScript文件，用来编写小程序的页面逻辑</td> 
  </tr> 
  <tr> 
   <td>wxml</td> 
   <td>类似html文件，用来编写页面的标签和骨架</td> 
  </tr> 
  <tr> 
   <td>wxss</td> 
   <td>类似css文件，用来编写界面显示的样式，实际编写的时候就是css，就是格式换成了wxss</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>配置页面的样式与行为</td> 
  </tr> 
 </tbody> 
</table>

值得注意的是，**以上四种类型的文件类型的文件文件名字必须相同**  
![在这里插入图片描述][20190125181444903.png]  
另外，系统自动生成utils文件夹是用来放一些公共的js文件，比如utils下面的util.js.当然你也可以新建其他文件夹存放。

### 新建界面 ###

我们现在用来开发小程序的框架，微信团队称之为MINA框架。MINA框架的原理暂时不需要了解，我们现在先学会怎么使用。  
新建项目的时候，MINA框架其实给我新建了两个界面，一个是首页index界面，一个是log界面。index界面就是我们现在看到的页面，现在我们来看看logs界面是什么内容。但是现在我们不能直接由首页index界面跳转log页面，我们换个方法—`把log界面当成首页`。点开app.json文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]  
app.json是一个典型的json对象，`pages`属性接受一个数组，数组的每一项是一个字符串，用来指定我们的小程序由哪些页面组成，每一项由对应页面的【路径+文件名】组成。比如上面的代码里的`"pages/index/index"`中，`pages/index/`是页面的路径，后面的`index`是对应的页面的名称，不需要指定具体的文件扩展名，MINA框架会自动把对应路径下相应的界面的`.js`,`.json`,`.wxml`,`wxss`文件进行整合，形成一个界面。**并且默认把第一个页面当成是小程序的首页**。

现在我们看到，在`app.json`里`pages`属性里的第一个页面是index界面，现在我们把logs页面放到第一个，再编译一下看看效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]  
可以看到，左边的模拟器显示的页面变成了logs页面，上面显示了启动小程序的记录。  
现在，我们来尝试一下在index路径下新建一个hello页面。  
有两种方法，第一种比较麻烦，就是在index目录下新建`hello.js`, `hello.json`, `hello.wxml`, `hello.wxss`四个文件，然后再在`app.json`的`pages`数组里加上这一个页面，这种方法不推荐。比较推荐的是第二种简便快速的方法，就是直接在`app.json`的`pages`数组里声明这个页面，然后`Ctrl+s`组合键保存或者`点击编译`按钮,MINA框架会自动帮你在相应路径下生成这四个文件。这里我选择的是第二种方法，直接在`app.json`的`pages`数组里添加hello页面，并把hello页面当成首页（即放在pages数组的第一个）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]

### wxml组件 ###

首先在pages目录下新建一个文件夹`resource`（右键点击pages，选择新建目录），因为微信开发者工具没有提供导入资源的功能，所以只能在操作系统中打开项目的目录，把资源复制进去。  
现在我在resource目录下放了一张图片，然后再hello界面中通过组件引用这个图片。  
现在我们更改一下hello.wxml的内容

<view>
    <image src='../resource/my.jpg'></image>
    <text>Hello 小程序</text>
    <view>
    <text>开启小程序之旅</text>
    </view>
    </view>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]  
这段代码使用了三个微信小程序的组件—`view`,`text`,`image`，这也是最常用的几个组件之一，其中`view`组件类似html中的`div`标签,`text`用来显示一段文本，与`span`类似，`image`用来显示图片，与`img`类似。  
还有其他很多组件这里没有用到，可以查看官方文档详细了解一下。网址：[https://developers.weixin.qq.com/miniprogram/dev/component/][https_developers.weixin.qq.com_miniprogram_dev_component]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 6]

### wxss样式 ###

接下来我们在hello.wxss里给界面添加样式，首先我们先给hello.wxml中的组加上样式名称 class name

<view class='container'>
    <image class='avatar' src='../resource/my.jpg'></image>
    <text class='motto'>Hello 小程序</text>
    <view class='journey-container'>
    <text class='journey'>开启小程序之旅</text>
    </view>
    </view>

然后设置页面样式。其实wxss的语法和css是一样的，wxss支持的选择器少了许多。

/* pages/index/hello.wxss */
    .container{
        
      /* 设置所有组件元素的容器样式 */
      display: flex;
      flex-direction: column;
      align-items: center;
      
    }
    .avatar{
        
      /* 设置图片的大小和样式 */
      width: 200rpx;
      height: 200rpx;
      margin-top: 10rpx;
      border-radius: 100px;/*图片以圆形的方式显示*/
    }
    .motto{
        
      /* 设置 "hello,小程序"的样式 */
      margin-top: 200rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #9F4311;
    }
    .journey-container{
        
      /* 设置"开启小程序之旅"外边框样式 */
      margin-top: 200rpx;
      border: 1px solid #EA5A3C;
      width:200rpx;
      height: 80rpx;
      border-radius: 5px;
      text-align: center;
    }
    .journey{
        
      /* 设置圆角矩形内的文本样式 */
      font-size: 22rpx;
      font-weight: bold;
      line-height: 80rpx;
      color:  #EA5A3C
    }

效果图如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 7]

#### 支持的css选择器： ####

在官方文档里，声明支持的选择器如下，不过，经过测试，其他很多选择器也是支持的。但为了避免出现问题，还是尽量使用官方推荐的选择器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 8]

### 页面根元素 page ###

如果想要给整个页面设置背景色该怎么办？  
按照我们css的知识，我们尝试在给最外层view增加背景颜色，效果如下图，我们发现背景元素并没有占据整个界面。其实在最外层的view的外包，小程序还有一个默认容器元素：`page`，这是MINA框架默认添加在最外层的。page元素代表这个页面整体，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 9]  
现在我们尝试对page元素设置背景色，如下图。  
`page`代表着整个页面的容器，如果想对页面整体做样式或者属性设置，那么应该考虑这个页面的根元素`page`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 10]

### 顶部导航栏设置 ###

在app.json里有一个`window`配置项，可以用来设置小程序的状态栏、导航栏、标题和窗口的背景色等等。  
相关属性如下：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>描述</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigationBarBackgroundColor</td> 
   <td>HexColor</td> 
   <td>#000000</td> 
   <td>导航栏背景颜色，如 <code>#000000</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationBarTextStyle</td> 
   <td>String</td> 
   <td>white</td> 
   <td>导航栏标题颜色，仅支持 <code>black</code> / <code>white</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationBarTitleText</td> 
   <td>String</td> 
   <td></td> 
   <td>导航栏标题文字内容</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>navigationStyle</td> 
   <td>String</td> 
   <td>default</td> 
   <td>导航栏样式，仅支持以下值：<br><code>default</code> 默认样式<br> <code>custom</code> 自定义导航栏，只保留右上角胶囊按钮。参见注2。</td> 
   <td>微信客户端 6.6.0</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>HexColor</td> 
   <td>#ffffff</td> 
   <td>窗口的背景色</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundTextStyle</td> 
   <td>String</td> 
   <td>dark</td> 
   <td>下拉 loading 的样式，仅支持 <code>dark</code> / <code>light</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>backgroundColorTop</td> 
   <td>String</td> 
   <td>#ffffff</td> 
   <td>顶部窗口的背景色，仅 iOS 支持</td> 
   <td>微信客户端 6.5.16</td> 
  </tr> 
  <tr> 
   <td>backgroundColorBottom</td> 
   <td>String</td> 
   <td>#ffffff</td> 
   <td>底部窗口的背景色，仅 iOS 支持</td> 
   <td>微信客户端 6.5.16</td> 
  </tr> 
  <tr> 
   <td>enablePullDownRefresh</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否开启当前页面的下拉刷新。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>onReachBottomDistance</td> 
   <td>Number</td> 
   <td>50</td> 
   <td>页面上拉触底事件触发时距页面底部距离，单位为px。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>pageOrientation</td> 
   <td>String</td> 
   <td>portrait</td> 
   <td>屏幕旋转设置，支持 <code>auto</code> / <code>portrait</code> / <code>landscape</code> </td> 
   <td>2.4.0 (auto) / 2.5.0 (landscape)</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 11]

这里我修改了导航栏的背景颜色。其他属性读者自行设置尝试。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70]: /images/20220322/ee84fe8c35da44dba1b8eb276120daca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]: /images/20220322/edd436168b724382ba7bf1d466d21d28.png
[20190125180458890.png]: /images/20220322/9024ea716f0344d79a0da596e46819e9.png
[20190125181444903.png]: /images/20220322/1790b3a2bd7b4cbabb8f6cae769b6f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]: /images/20220322/1c80f02ce2cc4ebfbe5c8e7102ae03c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]: /images/20220322/9550e16d7abd45caa53efb6e7b215371.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]: /images/20220322/e7cf9b9e0a404775a36b85dedaf6b3b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]: /images/20220322/3b999e27e533494f9d90b9043423a159.png
[https_developers.weixin.qq.com_miniprogram_dev_component]: https://developers.weixin.qq.com/miniprogram/dev/component/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 6]: /images/20220322/82ae41dd916e4d1191b308a9b48f3c68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 7]: /images/20220322/4a38adf89d294d9ba490905d246ab189.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 8]: /images/20220322/68512f5cf845468b9cc097a53f544247.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 9]: /images/20220322/1045f2f2b5aa48289585459f0d7e5575.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 10]: /images/20220322/8bdb8209b92c4b88aabb8b7d6ffc712b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 11]: /images/20220322/8790dac8a14a4744ad90ff48d234fb8c.png