七天学习微信小程序开发（一）—— 学习笔记

前言

最近受疫情的影响，一直呆在家中进行网课学习。由于我们有一定的JS、CSS以及后端开发的基础，所以老师只给了七天的时间学习智能微信小程序的项目开发。在线上听课的同时，抽空也将一些重点记了下来，在此上传至CSDN下作以保留。这里所写的代码，基本都是固定格式，在开发其他功能的小程序中同样适用。

目标

• 前端 —— 掌握微信开发技术
• 后端 —— 掌握node.js的egg框架
• AI技术 —— 掌握各大平台的AI接口使用方法（如：腾讯AI、阿里AI、百度AI等）
• 最终目标 —— 开发一个AI产品

---

第一天 —— 前端配置和编写

微信开发

注意事项：

• 一：需要一个微信账号

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

  • 第一步：打开此网址https://mp.weixin.qq.com
  • 第二步：选择个人开发
  • 第三步：申请开发必要的appkey和appid，在开发设置里面有appkey，可在本地电脑上保存这两个数据

• 三：使用各大厂商的AI接口提供的功能，开发自己的产品（各种厂商的AI网站可在参考资料下自行获取使用）

微信开发工具使用方法：

​ 第一步：打开微信开发工具

​ 第二步：选择项目目录，可以选择默认，也可选择其他目录

​ 第三步：appid填入上一步获取的appid或者选择测试

微信小程序的代码结构

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

2、在app.json文件中，pages数组中代表的是页面路径,所有的小程序页面都必须在这里进行注册，放在数组第一个的就是小程序的入口页面，也就是第一个加载出来的页面

3、pages文件夹中代表的就是该小程序的所有页面

注意：在创建页面的时候，文件夹的名字最好和页面名字相同

4、页面由4个文件组成
.js文件：主要实现用户交互和跟后端的交互
.wxss文件：决定了页面上的控件的外观（如：宽高背景颜色字体大小等270多个效果）例如：

 .myname{
   
	 width:200px;
	 color:red;
 }

.wxml文件：用来写标签，决定页面上展示哪些控件和内容

常用标签(wxml)

标签名称	功能
view	用来排版的模块标签，可以在它里面放很多控件
text	放文字的标签
image	显示图片,在src属性里面放图片的网址或路径

其他标签不再展示，可在微信开发文档查看。

常用样式(wxss)

样式名称	介绍
宽（width）	设置宽度
高（height）	设置高度
背景颜色（color）	设置背景颜色
圆角度（border-radius）	设置圆角度
文字、大小、颜色（font-xxx）	例如：font-size:30px;
线条粗度（font-wight）	设置线条粗度
间隔（leter-space）	设置间隔距离
行高（line-height）	设置行高
页面背景（background-image:url(“放入图片地址或图片路径”)）	设置页面背景
调整界面居中（text-align:center）	设置界面布局方式为居中
调整字体大小（font-size:）	例如：font-size:25px;
字体加粗（font-weight:bold;）	设置字体加粗

其他不再赘述，只展示最常用的样式，其余样式可在CSS文档下查看使用。

界面布局的技术

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

代码格式：

.xxx{
   
 display: flex;              /*弹性布局*/
 justify-content:flex-start; /*居左对齐 flex-end  space-round space-beteawn*/
 flex-wrap: wrap;            /*内容模块超出了自动换行*/
}

最小宽度：内容比元素窄
最大宽度：内容比元素宽

.xxx{
   
	min-width:20px;  /*最小20px*/
	max-width:200px; /*最宽200px*/
}

任务

• 写一个微信聊天的页面（不需要实现功能，只展示静态效果)

• 写一个商品页面的商品排版

第二天 —— 深度学习微信前端编写（一）

程序底部图标

icon图标库：阿里矢量图标库网址 https://www.iconfont.cn/

图标显示的开发步骤：

1、在程序的app.json文件中输入tabBar，即可创建单个或多个跳转按钮
2、tabBar属性中的"iconPath"：放入图片icon路径，“selectedIconPath”：放入单击后的图片路径。

页面数据

1、微信中开发时，对于变量的取法：在wxml文件中，通常在标签中使用双大括号来对变量取值。
例如：

<view>{
  {……}}</view>

注意：

1、在使用image标签对数据进行取值时，图片文件要放在src中。

例如：

<image src="{
    {……}}"></image>

2、在js文件中，存放自定义数据的元素要放在data中，通常数据有以下几种格式。

• 1、对象格式，如：

  obj:{
       name:"zhangsan",age:"22"}
  

• 2、元素定义赋值，如：

  title:"hello word"
  

• 3、数组格式，如：

  arr["123","456","789"]
  

• 4、对象+数组格式，如：

  users[{
       name:"marry",age:11},{
       name:"xiaomin",age:22},{
       name:"kares",age:33}]
  

3、在wxml中调用js中保存的数据

通常使用双大括号的格式调用，如:

<text>{
  {users[0].name}}</text>

for循环

1、在wxml中for语句的使用方法，如：

<view wx:for="{
    {arr}}">{
  {item}}</view> <!--此时程序会自动遍历数组中所有的元素，并显示在页面上。-->
<view wx:for="{
    {users}}">{
  {item.name}}</view> <!--使用此方式可以对对象数组或复杂数据进行调用。-->

2、企业级数据的获取及使用

通过不同的平台获取页面的json或Ajax数据，粘贴复制到js文件中的data中，然后在onLoad中写入函数，例如：

onLoad: function (options){
   console.log(this.data.weibo)}

3、Ajax中的数据可通过搜索查找相应的数据对应。

4、数据导入完成后，即可通过for循环，将其展示在页面上。

if语句

1、使用格式：

<view wx:if="{
    {判断条件}}"></view>

2、for循环和if语句可嵌套使用。

任务

• 制作一个可以跳转的界面，并在一个页面上显示获取到的相应的数据（理解json/ajax的数据处理）

第三天 —— 深度学习微信前端编写 （二）

文本框和按钮的事件

1、文本框（input）属性

• value的值是文本框中所显示的内容。例如：

  <input>
  	value="{
      {inp1}}"	<!--这时inp1所在的js页面中所写的数据将被调用 -->
  </input>
  

• bindinput=“函数名”，文本框的自定义函数，在js中定义此函数。

  定义格式如下：

  函数名:function(e){“这里写入该函数的方法”}

  常用函数	作用
  console.log(this.……)	控制台输出括号中this调用的数据
  console.log(e.detail.value)	在文本框函数中使用时,会在控制台输出此时文本框所调用的数据
  this.setData({inp1:e.detail.value})	设置此时inp1的值为文本框中输入的值

2、按钮（button） 属性

• bindtap=“函数名”，按钮自定义函数，在js中定义此函数。定义方法同文本框自定义函数类似。

• 声明变量时,使用let来声明变量。例如：

  let last=this.data.count
  

  实例：通过点击按钮实现数字的加减，并把运算后的结果输出到屏幕上。

  方法：这时可通过使用let声明变量，setData设置变量等。（代码如下）

   data:{
       count:1} /*存放的数据*/
   test.function()
   {
       	
       let newData=this.data.count+1 /*变量new存放新的数据*/
  	 this.setData({
       count:newData}) /*设置变量（赋值）*/
   }	  
  

获取用户信息

1、在js文件中的onLoad:function(options)中写入如下代码：

wx:wx.getUserIn