微信小程序

&action=Index&m=index

一、微信小程序的开发的环境安装

  首先安装好phpstudy_pro然后打开并且启动MYSAQL5.7.26与Apache.4.39。

然后打开网站，选择浏览器打开， 如果出现

 安装微信小程序开发工具

可前往微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适版本进行安装。

注册开发账户

用户可以直接前往公众号 (qq.com)进行注册。

二、小程序开发工具的使用介绍

当我们第一次打开工具时，会出现这样的画面 ，由于我们学习的是小程序开发，所以左边选项应当是选择小程序。

点击加号会出现下方 

首先创建自己的小程序我们需要有自己的根目录，（项目名称可以先不用填写，因为当你选择或者创建好自己的根目录时，这一栏会自动更新填写）

我们可以先在桌面创建一个文件夹用于存放我们接下来的学习内容，再在里面创建一个文件夹——study这就是我们熟悉小程序项目的根目录。然后点击目录去索引我们所创建的根目录

 紧接着就是填写AppID,AppID就是开发者自己的身份标识。

那怎么获取AppID那？我们可以去小程序开发平台，按照图下操作即可获取我们的ID信息

对于后端服务选择：如果你自己创建的项目没有自己的数据库，函数等，选择，云开发服务，之后可以调用他们的云数据库，云函数，云调用等等。

之后即可点击新建，打开我们的微信开发工具。

其中预览一项，如果选择自动预览，那么小程序将会自动在开发者手机微信上显示出来。

三小程序初始化文件说明

每个小程序开发是必须含有app.js,app.json。其中app.js作用于注册小程序。对于app.json详情可浏览小程序开发平台。其中我们可以通过修改window模块，对窗口进行设计（每次编辑完成可以使用Ctrl+s进行保存）

 对全局窗口进行设计：

app.wxss是用于放置公共样式文件

四、小程序，index静态页面搭建

开始搭建之前，我们打开我们的根目录文件管理并且删除所圈文件，从头开始搭建编写，为了我们更好的学习。

创建app.json用于存放页面路径

创建app.js:

创建app.wxss。

紧接着：新建页面的时候，我们可以先建page文件夹，再创建index文件夹，然后右击index文件，勾选新建page就能高效创建“.js，.json .wxss .wxml”。

当我们建好新页面的时候，为了能显示出来，我们可以让app.json中创建的page一栏会自动写入该页面路径。

完成以上操作后，我们可以来完成窗口设置：

我们在app.json中直接创建window模块就能对窗口进行相应设置：

然后搭建我们的页面文本，这一项在index.wxml（用于搭建页面内容）中进行：

我们在<view></view>中间插入对应想显示的东西其中<text>中间是显示文字<image>显示图片，<image 在此可以输入图片路径出入图片（绝对路径）></image>，在每一个<>中添加class来定义命名，用于在wxss来设计样式格局：

五、小程序——数据绑定

1、页面.js的data选项中

设置好初始化数据。

如果知道我们页面中有哪些初始化数据哪？

我们打开工作台选择Appdata选项即可显示：

如何使用初始化数据哪？

我们需要去wxml页面文件中在《text》中间用双{{}}来写入初始化变量

如果修改初始化数据？

首先我们要了解js中生命周期函数，其中页面加载生命周期函数（onLoad函数），是最先执行的，我们可以用console.log(“onLoad”)来测试。  console.log（）是打印功能

修改msg的状态数据 我们用到语法：this.setData（this代表当前页面的实例对象）

this后必须加上data，因为不加就会劫持不到msg数据，就无法修改。

延迟修改函数

该功能执行后，会延迟2秒修改显示。        this.setData()修改数据时候是同步的。

六、小程序——事件绑定

bind绑定事件：不会阻止冒泡事件冒泡

catch绑定事件：可以阻止冒泡事件的冒泡

进行事件绑定测试：

事件的回调需要在js中定义，一定要注意的是事件的回调与data已经生命周期函数是平级的

之后执行的时候，我们先 是测试的bindtap绑定，会执行两次，先是打印 子，再者是 父。

 bindtap换成catchtap时：

点击“hello world”只会出现“子”只有单独点击“父”的时候，也就是方框的时候才会出现“父”因为catch会阻止冒泡实验。

再次点击框才能出现“父”

七、小程序——路由跳转

跳转页面实验，我们首先需要创建一个logs页面：

有两种跳转方法：wx.navigateTo(保留当前页面，并且跳转至某个界面）与wx.relunch（关闭当前页面，跳转至某个页面）

注意填写路径的时候，应加上“/”因为它在执行的时候会自动添加“page/index/”所以导致生成一个page/index/page/logs/logs这个路径根本不存在，所以只需加上“/”根路径

同时那也可以在logs页面的json中去设置本窗口但不需要写出window，直接写出等即可。

 

八、生命周期函数

用于对于页面内容的设计。

九、获取用户信息

 

写入button，用getUserProfile方法来获取用户信息，但由于在2021年更新之后，该方法只会获得隐藏信息，而不会弹窗。

十、轮播图 

写入swiper，其中ndicator-dots下部指示点，indicator-color指示点颜色，indicator-active-color选中当前指示点颜色。

对于基础的轮播图，只需将以下代码重复

然后在wxss页面设置图面大小： 

十一、前后端交互

 

交互的前提是一定要找到后端正确的链接，以来客商城为例： http://localhost/app/LKT/index.php?module=api&software_name=3&edition=1.0这是总的后端接口。

十二、函数请求封装功能 

以来客商城轮播图为例

我们需要正确的链接好后端，然后从中找出正确的轮播图的后端接口：http://localhost/app/LKT/index.php?module=api&software_name=3&edition=1.0&action=Index&m=index

最后按照一下设置代码

实现轮播功能：