七天学习微信小程序开发

微信小程序开发实用学习笔记

前言

最近，受疫情影响，我一直呆在家里在线学习。因为我们有一定的JS、CSS和后端开发基础，老师只花了七天时间学习智能微信小程序的项目开发。在线收听时，我花时间写下一些要点并上传到CSDN进行预订。这里编写的代码基本上是固定格式的，这也适用于开发具有其他功能的小程序。

目标

前端-掌握微信开发技术

后端——掌握node.js的egg框架

人工智能技术——掌握各大平台（如腾讯人工智能、阿里巴巴人工智能、百度人工智能等）人工智能接口的使用方法

最终目标-开发人工智能产品

第1天-前端配置和写入

微信开发

注意事项：

1： 需要微信账号

2： 将微信账号升级为开发者账号（操作步骤如下）

步骤1：打开此网站

第2步：选择个人发展

步骤3：申请开发必要的appkey和appid。开发设置中有一个appkey，可以保存在本地计算机上

3： 使用主要制造商的AI接口提供的功能开发自己的产品（可在资源下获取和使用各制造商的AI网站）

如何使用微信开发者工具：

步骤1：打开微信开发工具

步骤2：选择项目目录。您可以选择默认目录或其他目录

步骤3：填写上一步中获得的appid或选择测试

微信小程序代码结构

1.app开头的文件是整个小程序的入口

2.在app中，在json文件中，pages数组表示页面路径。所有小程序页面必须在此处注册。数组中的第一页是小程序入口页，这是加载的第一页

3.页面文件夹代表小程序的所有页面

注意：创建页面时，文件夹名称应与页面名称相同

4.页面由4个文件组成

.js文件：（强调）主要实现用户交互和后端交互

.wxss文件：确定控件在页面上的外观（例如，超过270个效果，如宽度、高度、背景、颜色、字体大小等）例如：

.myname（我的名字）{

宽度：200px；

颜色：红色；

}

.wxml文件：用于写入标记并决定页面上显示哪些控件和内容

通用标记（wxml）

标签名称

作用

<；/视图>

用于排版的模块标签可以包含许多控件

<；/文本>

用于放置文本的标签

<；/图像>

显示图像，并将图像的URL或路径放在src属性中

其他标签不会显示，但可以在微信开发文档中查看。

通用样式（wxss）

样式名称

介绍

宽度

设置宽度

身高

设置高度

背景色

设置背景色

圆角度（边界半径）

设置圆角度

文本、大小、颜色（字体xxx）

例如：font-size:30px；

线条粗细（字体宽度）

设置线条粗细

字母间距

设置间距

线路高度

设置行高度

页面背景（背景图像：url（“放置图像地址或图像路径”）

设置页面背景

调整界面居中（文本对齐：居中）

将界面布局模式设置为居中

调整字体大小（字体大小：）

例如：font-size:25px；

字体粗细：粗体

设置字体粗体

“颜色”：“#bfbfbf”

默认文字样式

“selectedColor”：“#333333”

所选文本样式

其他样式将不再重复。仅显示最常用的样式。其他样式可以在CSS文档中查看和使用。

界面布局技术

1.元素内控件之间的弹性布局技术

代码格式：

.xxx年{

显示：flex；/*灵活的布局*/

调整内容：灵活启动；/*与左侧弯曲端空间对齐圆形空间beawn*/

柔性包裹：包裹；/*内容模块超过换行*/

}

最小宽度：内容比元素窄

最大宽度：内容比元素宽

.xxx年{

最小宽度：20px；/*最小20px*/

最大宽度：200px；/*最大宽度：200px*/

}

任务

写一个微信聊天页面（不需要任何功能，只显示静态效果）

在产品页面上编写产品布局

第二天-深度学习微信前端写作（一）

程序底部图标

图标图标库：阿里巴巴矢量地图URL

图标显示的开发步骤：

1.在app中输入tabBar。json文件创建单个或多个跳转按钮的程序

2.tabBar属性中的“IconPath”：放置图片的图标路径；“selectedIconPath”：放置单击的图片路径。

页面数据

1.在微信中开发时，我们通常使用双大括号来为wxml文件中的变量赋值。

例如：

{……}}

小心：

1.当使用图像标记对数据进行赋值时，图像文件