微信小程序（一）

whatever=_=

已于 2024-08-12 13:26:29 修改

阅读量575

点赞数 11

文章标签：微信小程序

于 2024-08-11 22:08:54 首次发布

本文链接：https://blog.csdn.net/2401_85162244/article/details/141112903

版权

一、基础

1.1定义

微信小程序是一种运行在微信内部的轻量级的应用程序。

在使用小程序时，不需要下载安装，用户扫一扫或搜一下即可打开应用。它体现了“用完即走”的理念，用户不用关心安装太多应用的问题，它实现了应用“触手可及”的梦想，应用无处不在，随时可用，但又无须安装卸载。

1.2小程序账号注册

准备一个邮箱：未被微信公众平台、微信开发平台注册和未被个人微信绑定

在开始小程序开发之前，需访问微信公众平台，注册一个微信小程序账号，才可进行开发和管理小程序，后续需通过该账号进行开发信息的设置、开发成员的添加，也可以用该账号查看小程序的运营数据

浏览器搜索“微信公众平台”，分别点击注册、小程序、前往注册

1.3成员

项目成员：参与小程序开发、运营，包括运营者、开发者及数据分析者，项目成员可以登录微信公众后台，管理员可以在成员管理中添加、删除项目成员并设置项目成员的角色

体验成员：参与小程序内测体验的成员，可以使用体验版小程序，但不属于项目成员。管理员及项目成员均可添加、删除体验成员

1.4小程序开发者ID

微信小程序账号只要开发者满足开发资质都可以进行注册，并且会获得对应的开发者ID

一个完整的开发者ID由小程序ID(AppID)和一个小程序秘钥(AppSecret)组成

小程序ID是小程序在整个微信账号体系内的唯一凭证，后续在很多地方都会用到，如新建小程序项目、真机调试、发布小程序等操作，必须有小程序ID

小程序密钥是开发者对小程序拥有所有权的凭证，在进行微信登录、微信支付或进行发送消息等高级开发时会用到

1.5微信开发者工具下载

必须联网使用，可以进行小程序开发、代码查看、编辑、发布等

微信开发者工具包含三个版本：

①稳定版：稳定性高，开发中一般推荐使用

②预发布版：稳定性尚可，一般包含新的、大的特性，通过了内部测试

③开发版：稳定性差，主要用于尽快修复缺陷和敏捷上线小的特性

1.6项目

1.文件

一个完整的小程序项目分为两部分：

(1)主体文件

能作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下，由三部分组成：

①app.js：小程序的入口文件

②app.json：小程序的全局配置文件

③app.wxss：小程序的全局样式文件

主体文件的文件名必须是app

(2)页面文件

每个页面所需的文件，小程序页面页面文件都放在pages目录下，一个页面一个文件夹

每个页面通常由四个文件组成，每个文件只对当前页面有效，分别是：

①.js：页面逻辑

②.wxml：页面结构

③.wxss：页面样式

④.json：小页面配置

.js文件和.wxml文件是必须的 (3)新建页面

方法一：

在pages里新建文件夹命名后按回车，再右键点击该新建的文件夹点击新建page，输入与该新建文件夹名字相同再回车

方法二：

在app.json里找到pages，按照前面相同路径新建文件并保存，即可发现新建的目录

(4)调试基础库

小程序调试基础库是指微信开发者工具中可以选择微信基础库版本

微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种API和工具，以及基础框架和运行逻辑等

小程序开发者可以在微信开发者工具中选择所需的微信基础库版本，作为运行和调试小程序时的运行环境

每个小程序有自己所允许使用的基础库最低版本要求，开发者需要选择兼容的基础库版本，从而确保小程序的功能正常运行

切换版本：

点击详情-本地设置

分享到朋友圈功能，基础库从2.11.3开始

2.调试小程序代码

将模式修改为WebView渲染模式：将配置项"renderer"、 "rendererOptions"、 "componentFramework"删除并保存即可

以下四种方式

①编译：相当于刷新

②点击预览，扫描二维码点击三个点-开发调试，重启，扫描二维码，在手机调试

③真机调试，扫描二维码，会弹出调试器

④清除缓存

⑤上面都没有用的话，重启项目

3.配置

json是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中，json扮演配置项的角色，用于配置项目或者页面属性和行为，每个页面或组件都有一个对应的json文件

（1）常见配置文件

①app.json：全局配置文件，用于配置小程序的一些全局属性和页面路由

②页面.json：页面配置文件也称局部配置文件，用于配置当前页面的窗口样式、页面标题等

③project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置

④sitemap.json：配置小程序及页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率，若允许，微信会通过爬虫的形式，为小程序的页面建立索引。当用户的搜索词条触发该索引时，小程序的页面可能展示在搜索结果中。

注意：没有sitemap.json文件则默认所有页面都能被索引 {"action":"allow","page":"*"}是优先级最低的默认规则，未显示指明"disallwo"的页面都默认被索引，指定页面不能被检索：

 首页不能被索引，其他页面都能被检索

 "rules": [{
     "action": "disallow",
     "page": "pages/index/index"
     }]

 只有首页能被索引，其他都不能被索引

 "rules": [{
     "action": "allow",
     "page": "pages/index/index"
     }]

⑤config.json：在创建项目时，每个项目的根目录生成两个config.json文件(project.config.json和project.private.config.json)，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。当查询安装微信开发者工具或换电脑时，只要载入同一个项目的代码包，开发者工具会自动恢复到当时开发项目时的个性化配置

project.config.json:项目配置文件，常用来配置公共的配置

project.private.config.json：项目私有的配置，常用来配置个人的配置，不能放到git进行管理，不然会产生冲突，而是写到.gitignore来避免版本管理的冲突

注意：与最终结果有关的设置必须设置到project.config.json中

点击右上角详情-本地设置，与最终结果有关的配置进行勾选会出现在project.config.json中

设置 / 项目配置文件 (qq.com)

在project.config.json的setting中添加字段

"useCompilerPlugins": [

"sass"

],再将cate里的wxss文件改成scss文件

（2）pages配置

pages字段：在app.json中，用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路径信息

配置pages字段注意事项：

①页面路由不需要写文件后缀，框架会自动寻找对应位置的四个文件进行处理

②新增或减少页面都需要对pages数组进行修改

③未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页），哪个页面在第一个位置，哪个页面就是首页

配置entryPagePath：在app.josn中新增字段entryPagePath，参数值为对应页面路径

（3）window配置

window字段：用于设置小程序的状态栏、导航条、标题、窗口背景色(窗口默认不展示，用户刷新后才展示窗口)

官方文档：小程序配置 / 全局配置 (qq.com)

常见属性：

     //导航栏标题
     "navigationBarTitleText": "慕尚花坊",
     //导航栏背景
     "navigationBarBackgroundColor": "#f3514F",
     //是否下拉
     "enablePullDownRefresh": true,
     //窗口背景颜色
     "backgroundColor": "#efefef",
     //刷新样式
     "backgroundTextStyle":"dark"//加载效果

（4）tabBar配置

tabBar字段：定义小程序顶部、底部tab栏，用以实现页面之间的快速切换，可以通过该配置指定tab栏的表现以及切换时显示的对应页面

 selectedColor：被激活时的文字颜色
 color：未被激活时的颜色
 backgroundColor：整条tab栏的颜色
 borderStyle:tab栏边界颜色
 position:tab栏位置
 list：selectedIconPath：被激活时，图表的路径
       pagePath:点击时要跳转的页面路径
       iconPath:未被激活时图标路径
       text:每个tab的文字内容

注意：tab按数组顺序排序，list配置最少2个、最多5个tab

官方文档：小程序配置 / 全局配置 (qq.com)

底部导航栏代码：

  "tabBar": {
     "list": [
       {
         "text":"首页",
         "pagePath": "pages/index/index",
         "iconPath": "/assets/tabbar/index.png",
         "selectedIconPath": "/assets/tabbar/index-active.png"
       },
       {
         "text":"分类",
         "pagePath": "pages/cate/cate",
         "iconPath": "/assets/tabbar/cate.png",
         "selectedIconPath": "/assets/tabbar/cate-active.png"
       },
       {
         "text":"购物车",
         "pagePath": "pages/cart/cart",
         "iconPath": "/assets/tabbar/cart.png",
         "selectedIconPath": "/assets/tabbar/cart-active.png"
       },
       {
         "text":"我的",
         "pagePath": "pages/profile/profile",
         "iconPath": "/assets/tabbar/profile.png",
         "selectedIconPath": "/assets/tabbar/profile-active.png"
       }
     ]
   }

（5）页面配置

页面配置也称局部配置，每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行设置

注意：页面配置文件属性和全局配置文件中的window属性几乎一致，只不过这里不需要额外指定window字段，因此，若出现相同的配置项，页面中的配置会覆盖全局配置文件中相同的配置项，即局部配置会覆盖全局配置

4.样式

小程序不能使用HTML标签，也就没有DOM和BOM，CSS也仅仅支持部分选择器

小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面的样式编写

WXML提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中将标签称为组件

WXSS对CSS进行扩充和修改，新增了尺寸单位rpx，提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器

（1）尺寸单位rpx

rpx是小程序新增的自适应单位，可以根据不同设备的屏幕宽度进行自适应缩放

小程序规定任何型号手机屏幕宽度都为750rpx

开发建议：

开发微信小程序时，设计师可以用iPhone6作为视觉稿的标准，iPhone6的设计稿一般是750px

若使用iPhone6作为视觉稿的标准，量取多少px直接写多少rpx即可，开发起来更方便，也能适配屏幕宽度

设计稿的宽度是750px，而iPhone6的手机设备宽度是375px，设计稿想完整展示到手机中，就需要缩小一倍

在iPhone6下，px和rpx的换算关系是：1rpx=0.5px,750rpx=375px,刚好能填充慢满整个屏幕的宽度

（2）组件

在wxml文件内添加元素

1）view

是容器组件，类似于div，是一个块级元素，占据一行

2）swiper和swiper-item

可用于实现轮播图

①swiper：滑块视图容器，其中只能放swiper-item组件，其他内容不会展示

轮播图属性：

autoplay：自动播放，值为布尔值，可省略不写

interval：切换时长，单位为毫秒

indicator-dots：指示点

indacator-color：指示点颜色

indicator-active-color：被激活指示点颜色

circular：循环轮播

②swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项

3）image

图片组件

常用属性：

src：图片资源地址

mode：图片裁剪、缩放形式，值为top left表示只展示图片的左上角，为aspectFill时表示缩放模式，会按比例缩放，可能会有部分展示不出来,aspectFit可以将图片全部展示，但会可能有留白

show-menu-by-longpress：长按图片显示菜单

lazy-load：图片懒加载，向下滑动到一定距离（上下三屏）后展示图片

注意：

image默认有宽高，宽为320px，高为240px

image不设置src属性也占据宽高

4）text

常用于渲染文本，文本之间不论多少空格，只显示一个，要想显示空格，可添加属性，常用属性：

user-select：文本是否可选，用于长按选择文本

space：显示连续空格，值为ensp：以中文字符一半大小显示空格，emsp：以中文字符大小展示空格，nbsp：根据字体控制空格大小显示空格

注意：

只有text组件支持长按选中

text组件只能嵌套text

5）navigator

常用于跳转，常用属性：

url：要跳转的链接，注意，需在跳转的路径前面添加/，否则无法跳转

open-type：跳转方式

navigate：保留当前页面，跳转带应用内的某个页面，但是不能跳转到tabBar页面，可返回到原来页
redirect：关闭当前页面，跳转到应用内的某个页面但是不能跳转到tabbar页面，无法返回到原来页，只能返回到首页
switchTab：只能跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch：关闭所有页面，打开到应用内的某个页面，不能返回到上一页
navigateBack：关闭当前页面，返回上一页或多级页面，默认返回上一页，若要返回前几级页面，需添加delta属性设置返回的层级，默认值为1，想返回前几级，就写几
```
 分类页面
 <navigator url="/pages/list/list" open-type="navigate">跳转到tabbar页面</navigator>
 列表页面list
 
 <text>商品列表</text>
 <navigator open-type="navigateBack">back</navigator>
```
在分类页面点击跳转至列表页面，在列表页面点击back即可返回分类页面

注意

路径可以带参数，参数与路径之间使用？分隔，参数键与参数值之间用=相连，不同参数使用&分隔，如/list?id=10&name=hua，在list.js文件中的onLoad(option)生命周期函数中获取传递的参数

例如：在首页点击跳转至List页面时传递参数，若要接受参数，设置list.js文件，打印参数
```
 index.wxml文件：
 <navigator url="/pages/list/list?id=10&num=hua" open-type="redirect">跳转到列表</navigator>
 list.js文件：
 onLoad(options) {
     console.log(options)
   }
```
可以看见调试器打印参数
open-type="switchTab"时不支持参数

6）scroll-view

可滚动视图区域，常用于实现内容滚动，类似于网页中的滚动条效果，用户可通过手指滑动或点击滚动条来滚动内容

属性：

scroll-x：允许横向滚动，值为布尔值，可省去值不写

scroll-y：允许纵向滚动

横向滚动和纵向滚动示例：

 wxml:

 <scroll-view scroll-x class="scroll-x">
   <view>横向滚动</view>
   <view>1</view>
   <view>2</view>
 </scroll-view>

 scss:

.scroll-x{
   width: 100%;
   //不允许换行
   white-space: nowrap;
   background-color: skyblue;
   view{
     display: inline-block;
     width: 300rpx;
     height: 80rpx;
     
     &:first-child{
       background-color: lightgreen;
     }
     &:last-child{
       background-color: lightcoral;
     }
   }
 }

 wxml:

 <scroll-view scroll-y class="scroll-y">
   <view>纵向滚动</view>
   <view>1</view>
   <view>2</view>
 </scroll-view>

 scss:

 //实现纵向滚动需加一个固定高度
 .scroll-y{
   height: 400rpx;
   background-color: rgb(250, 204, 151);
   margin-top: 10rpx;
   view{
     height: 400rpx;
     &:first-child{
       background-color: rgb(201, 160, 238);
     }
     &:last-child{
       background-color: lightcoral;
     }
   }
 }

7）字体图标

在阿里巴巴矢量图标库找到需要的图标后导入项目，生成.css文件链接，点开该链接，将里面的代码复制，返回开发工具，在根目录新建iconfont文件夹，在里面新建iconfont.scss文件，将复制的代码粘贴到该文件，再在app.scss文件内导入该样式文件

 // 导入阿里巴巴矢量图标库
 //注意：导入样式文件后必须以分号结尾
 @import "./iconfont/iconfont.scss";

使用方法：

以下面图标为例：

样式文件iconfont.scss：

使用text组件来添加图标，需要给其设置class属性，属性值为：inconfont+图标名

 <view class="info">
   <text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
   <text><text class="iconfont icon-icon"></text>行业龙头</text>
   <text><text class="iconfont icon-clock"></text>半小时送达</text>
   <text><text class="iconfont icon-haoping"></text>100%好评</text>
 </view>

最终效果如下：

注意：

使用图标可能会报错：[渲染层网络层错误]Failed to load front...，该错误可忽略

解决方法：

可在阿里巴巴矢量图标库的项目设置-字体格式内，勾选Base64并保存

点击更新代码，点开链接

将iconfont.scss文件内容换为新复制的代码，再全部清除缓存、重新编译，则不会报错

8）背景图片

使用background-image属性来设置元素的背景图像，该属性不支持本地路径，需要使用网络图片或者转为base64编码（在线工具：在线图片转base64,在线base64转图片,图片base64编码-魔方工具箱）或使用<image/>组件

注意：由于base64编码太长，所以不建议使用，建议使用网络图片

 .wxml:

 <view class="bg-image"></view>

 .scss:

.bg-image{
   height: 400rpx;
   //小程序背景图地址不能写本地路径，不会显示
   // background-image: url(../../assets/bgimage.png);
 
   //使用网络图片替换本地路径
   // background-image: url(http://8.131.91.46:6677/bgimage.png);
   
   //使用工具转base64，网址：http://www.mf2.cn/img2base64
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1EAAAIICAIAAAAAEfN2AAAACXBIWXMAABJ0AAASdAHeZh....)
 }