微信小程序|基本页面设置

你的名字 2022-09-12 13:54 196阅读 0赞

**本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。**

问题描述

最近几年微信小程序特别的火，快捷容易不需要下载所以不占内存，给我们带来方便。支付，小游戏，应用等很多地方都需要小程序。其实小程序的开发和网页制作基本一样，都是需要用标签来定义。那么如何来设计简单的小程序页面？需要哪些元素呢？

解决方案

微信小程序顾名思义就是在微信中使用的一种小应用程序，不管是应用型还是游戏型它们都需要界面都需要在首页给使用者清晰的感受。页面的基本内容文字，图片，页面下方的任务栏分为不同的页面，一个任务键就是一个页面。结构性比较强要求比较高，跟网页一样需要很多的标签来定义。

首先需要登录微信开发者工具，在里面选择你想要制作的小程序的类型。

左边是小程序在手机上的界面，右边是写代码的区域。

![8fee9fd6b7d16af66630afc3eb559a88.png][]

图3.1.1

在app.json中进行小程序的总体框架设置。

A． app.json是小程序的全局配置，一些界面，导航栏图标，背景的设置等

我们在导航栏插入的不同的界面需要进行定义配置。

![a353526a45261925ee632a3f5aed9c8c.png][]

图3.2.1

![7537371d11da43956b940fb32f6167b2.png][]

图3.2.2

B．App.json中的tabBar中可以设置一些小程序中边框中的图片，文字的属性，颜色，背景，路径等。

![b18b118496452516cab6d0731f4e2d57.png][]

图3.2.3

![5545fff3627923cee00ca3534d9c9059.png][]

图3.2.4

C．window中是定义小程序中页面顶部的颜色，字体，字体颜色的。

![7d6a0b1774ff1bbffeea1989f5389eed.png][]

图3.2.5

![0cb194078676fb958a5b51efeae32cab.png][]

图3.2.6

D．“iconPath”是框框中原图标形式，”selectedIconPath”是你点击该图标时改变的另一种形式。

![ff7b1bce52cc1425a79065eab230327b.png][]

图3.2.7

![eceb800890663f91b65c88d0a926a440.png][]

图3.2.8

页面内容是在index.wxml里面写，index.wxss是定义一些盒子的属性。

![a7b96359d06ecc3613eaef606dd1ca7f.png][]

图3.3.1

![98181ef7d4536f388bf80305551cd0c7.png][]

图3.3.2

结语

小程序很有结构性，不同的属性设置会在不同的文件中书写，环环相扣，分工明确。跟网页一样需要用很多的标签来定义。一个小程序界面的基本要素就是导航栏，内容，边框功能键。小程序的开发会用到很多的网页的基本知识和css的定义。

实习编辑：王文星

稿件来源：深度学习与文旅应用实验室（DLETA）

[8fee9fd6b7d16af66630afc3eb559a88.png]: /images/20220828/f819e9f49c0548a19e0916853886585e.png
[a353526a45261925ee632a3f5aed9c8c.png]: /images/20220828/30f1160e422d431fa82c9f2c8ecc93df.png
[7537371d11da43956b940fb32f6167b2.png]: /images/20220828/3b7679aebae448b08d39c3be8c01e6a4.png
[b18b118496452516cab6d0731f4e2d57.png]: /images/20220828/4326a33b9e834a749820e6bf26a9a3bd.png
[5545fff3627923cee00ca3534d9c9059.png]: /images/20220828/41bb15c514f1453789683606905eed13.png
[7d6a0b1774ff1bbffeea1989f5389eed.png]: /images/20220828/52bf752f0dce4d90a39fd66adc4b5e2b.png
[0cb194078676fb958a5b51efeae32cab.png]: /images/20220828/4ca75321c7da400fa3396ad3a3abad6f.png
[ff7b1bce52cc1425a79065eab230327b.png]: /images/20220828/76e7f2b3d8b2406faff86f7f53305bfa.png
[eceb800890663f91b65c88d0a926a440.png]: /images/20220828/a3eaa02220e7470f941380ab0cf07d40.png
[a7b96359d06ecc3613eaef606dd1ca7f.png]: /images/20220828/69441ee57e7647e988caec48450aa83b.png
[98181ef7d4536f388bf80305551cd0c7.png]: /images/20220828/217abe1e146f426caef30b8aace99778.png