如何开发微信小程序（全解过程包括前端、后端）

微信小程序开发基础知识：

（1）手机的屏幕宽度的最大为750rpx（数据与rpx连写）；
（2）ctrl+s 保存即可运行新写的代码；
（3）新建项目的过程：
1、创建时不要选择云开发；
2、生成pages文件后，将pages文件中系统自动生成的文件都删除掉；
3、然后自己在pages文件夹下创建自己的界面（右键->创建文件夹->在在创建的文件夹下右键->创建page）
4、根据自己创建的文件夹路径修改app.json的 pages：{} 中的参数路径
如下，文件名为home

"pages": ["pages/home/home""pages/home2/home2"],

【注】哪个在前，调试时就会默认为初试界面。
5、创建界面主控制框（手机下方的切换界面）
在app.json中的主{}中创建如下代码：

 "tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "inco/HOME.png","selectedIconPath": "inco/HOME_select.png"},{"pagePath": "pages/home2/home2","text": "首页2","iconPath": "inco/HOME.png","selectedIconPath": "inco/HOME_select.png"}]

iconPath：表示按键图标（未选择时的），添加图标路径
selectedIconPath：表示按键按下后（选择了为当前页面），添加图标路劲
list 的元素个数至少为2，效果如图：

wxml语法

基础标签

<text></text> 文本标签
属性说明：<view></view> 布局块标签（最常用标签）
属性说明：<image></image> 图片标签
属性说明：<video></video> 视频标签
属性说明：
src             要播放视频的资源地址，支持网络路径、本地临时路径、等
controls        是否显示默认播放控件（播放/暂停按钮、播放进度、等）
autoplay    是否自动播放，false/true <audio></audio> 音频标签
属性说明：
controls    是否显示默认控件，false/true
poster      默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name        默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效    1.0.0
author      默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效  <scroll-view></scroll-view>滑动条标签
属性说明：
scroll-x    false/true  允许横向滚动
scroll-y    false/true  允许纵向滚动
**注**：一个超出scroll-view尺寸的view来带动多元素滑动。<swiper>可视化滚动标签<swiper-item>滚动元素</swiper-item>
</swiper>
属性说明：
indicator-dots                 false/true                   是否显示面板指示点
indicator-color                rgba(0, 0, 0, .3)            指示点颜色
indicator-active-color         #000000                      当前选中的指示点颜色
autoplay    boolean            false/true                   是否自动切换
interval                       5000                         自动切换时间间隔（单位为毫秒）每一个标签都能用 class 属性命名用于wxss添加样式

for循环

js中的对应代码如下：

  /*** 页面的初始数据*/data: {  arr:["a","b","c","d"],arr1:[{"name":"derek1","age":18},{"name":"derek2","age":19}]}

对应的for循环的wxml的程序题为：

<!-- wx:for="{{arr}} 表示将arr数组的长度作为for循环次数 -->
<!--  {{item}} 中的item表示arr中的元素，属于关键字 -->
<view class="box" wx:for="{{arr}}">{{item}}
</view><view class="box" wx:for="{{arr1}}">
{{item.name}}
{{item.age}}
</view>

if判断语句

<block wx:for="{{arr}}">                                            <!--以空白块为for循环的载体--><view wx:if="{{item.tag==true}}" class="right_view">              <!--if条件语句的调用格式--><image class="right_head" src="{{item.head}}"></image><view class="right">{{item.text}}</view></view><view wx:else class="left_view">                                  <!--else调用--><image class="left_head" src="{{item.head}}"></image><view class="left">{{item.text}}</view></view>
</block>

获取输入框input中的值

（使得输入框值实时在控制台显示，同时实时存在data中）
【注意】这里用的不再是“bindtap”而是使用“bindinput”属性
wxml中的代码：

 <input type="text" bindinput="bindinput" class="input_text"></input>

对应js中的的代码：

// 与界面输入框绑定实时获取输入框内容
bindinput:function(e){this.setData({inputvalue:e.detail.value})console.log(e.detail.value)
},

wxss语法

基础：添加样式的格式为
.class名{
css样式
}
1、从左到右排列，一排排满自动换为第二排

  display: flex;         /*弹性布局*/justify-content: flex-start; /*从左往右排*/flex-wrap: wrap; /*满行自动换行*/

2、左右浮动，即

float:left;
float:rigt;

3、position：相对位置（relative）、绝对位置（absolute）

 position: relative;（相对位置，即与上一次位置的相对位置）left: 8rpx; position: absolute;（绝对位置，）

4、文字超出区域采用省略号的效果（得给文字view创建一个父级的view使用才有效果）

/*文字超出出现省略号*/word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

5、一些基本样式：

 letter-spacing: 5rpx;//文字间距text-align: center;//文字左右居中margin：//间距

js语法

1、data数据的使用

   * 页面的初始数据*///messagge为json格式定义，并点语法调用data: {msg:"hello!",messagge:{name:"derk",age:10,text:"xiaxia"},src_img:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2561262272,416611847&fm=26&gp=0.jpg"},
// 点击事件，通过与组件链接调用该函数fn1:function(){console.log(1111);//打印数据this.setData({msg:"1**********"})//更改显示的数据和前面的data链接},fn2:function(){console.log(2222);//打印数据this.setData({msg:"2**********"})//更改显示的数据和前面的data链接},fn3:function(){this.setData({src_img:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2237600483,1886810625&fm=26&gp=0.jpg"})},

与 .wxml 文件中的链接与显示如下：

<!-- 显示msg的内容 -->
<view class="evidence"><view>{{msg}}</view>
</view><!-- 与函数fn1和fn2链接 bintap属性的使用 -->
<view class="control">
<view class="button1" bindtap="fn1">显示1</view>
<view class="button2" bindtap="fn2">显示2</view>
</view><!-- 切换图片 -->
<view class="picture"> <image src="{{src_img}}"></image>
</view><!-- 切换图片按钮 -->
<view class="but_picture" bindtap="fn3">顺切换</view><!-- Json格式数据点语法调用 -->
<view>{{messagge.name}}</view>
<view>{{messagge.age}}</view>
<view>{{messagge.text}}</view>

2、data的数据修改

data:{}
名: function(){this.setData({x:"xxx"})
}

【注】：this.setData({内容}) 中的指令，（1）当data中有x变量，则同名覆盖；（2）data中没有x变量，则执行新建。

3、给data中已定义的数组新增元素

// 给data里面的arr数组加入新的成分
adddata:function(){var new_data=this.data.arr;new_data.push({tag:true,text:this.data.inputvalue,head:"../../inco/1.jpg"})this.setData({arr:new_data})
},

nodejs的使用：创建后端服务器

1、检查nodejs时候下载好：
在文件输入框中输入cmd，调出终端框，在指令行输入：

node -v

提示出现版本号，即配置没有问题
2、在cmd指令框中输入，初始化项目

 npm init egg --type=simple

3、完成初始化后，会提示运行以下代码：

npm run dev

（后续启动服务器都使用这段指令，且需要在初始化的文件中的输入框中调出cmd后输入）
4、会出现丢包问题
终端提示：‘egg-bin’ 不是内部或外部命令，也不是可运行的程序或批处理文件。
解决：则输入以下指令

npm i

5、完成后再运行

npm run dev

则当出现：egg started on http://127.0.0.1:7001 的提示即服务器创建完成。
测试：
在浏览器中输入http://127.0.0.1:7001可以看到提示“hi，egg”。

6、如何修改服务器显示的内容（hi.egg）
在创建的文件下位置中的找到app文件，其中的controller文件中的home.js即可看见到显示的内容代码：如图：

通过修改ctx.body的值即可改变网页显示的内容。
【注】
ip ：127.0.0.1表示本机ip，别人不能访问；别人能访问的ip可通过在cmd中输入ipconfig查看IPV4 ，其指示就是可被别人访问的i
（如果需要收集访问的话，需要查看连接无线局域网的IPv4的值）
port（端口）的意思是一个电脑供程序访问的接口。

7、测试显示图片
在创建的文件中找到app文件，将需要放在网页的图片放在app文件中的public文件夹中，并在浏览器的输入框中输入http://127.0.0.1:7001/public/1111.png，1111.png是我要显示图片的名字。效果如下：

在微信小程序中如何使用自己的服务器资源：
即在js文件中的data：{}中定义与资源相同的网址即可（但是必须为IPv4的ip，不能为本地ip）

【提示】在后续后端的开发中，不需要再次创建文件并初始化操作，只需要将已经第一次初试化的文件压缩保存即可，下次时候的时候，解压使用即可。

【注意】在生成微信二维码之前，在微信开发工具的“详情”中勾选：“不校验合法域名、web-view。。。。”

前端访问后端数据过程

基础操作
1、使用vscode打开初始化生成的node文件，编辑 router.js 和 home.js 中的代码
【注意！注意！注意！】：编辑好了后，一定必须保存工程（save all），点击save只能保存当前的编辑界面，否则在启动node网络服务器时会报错误！！！！！

2、编辑好后，保存工程再在node初始化的文件中输入框使用cmd调出终断指令框，使用npm run dev 启动服务器

3、前端（微信开发工具）请求后端的数据并显示：请求：wx.request，wxml前面部分所提到的语法即可显示内容在界面

前端js代码

load2:function(){wx.request({url: 'http://192.168.0.104:7001/zcx_2',//请求的后端服务器地址success:(res2)=>{console.log(res2.data)this.setData({text2:res2.data})   //即是在data:{}创建text2的对象，可供wxml中的标签使用})},

后端的js代码：

（1）router.js 中的代码（主要定义网站是与链接函数）

'use strict';/*** @param {Egg.Application} app - egg application*/
module.exports = app => {const { router, controller } = app;//router.get('/', controller.home.index);//该功能是设置网址为/zcx，对应调用controler文件夹中home文件中的zcx函数router.get('/zcx', controller.home.zcx);router.get('/zcx_2', controller.home.zcx_2);};

（2）controler中的 home.js 中的代码（主要是定义与router.js链接的函数的功能）

'use strict';const Controller = require('egg').Controller;class HomeController extends Controller {// async index() {//   const { ctx } = this;//   ctx.body = '66666666';// }//router.js中使用代码调用zxc函数的功能即是将ctx.body的内容传给访问的前端async zcx() {const { ctx } = this;ctx.body = 'this is my data';}async zcx_2() {const { ctx } = this;ctx.body = [{"name":"derek","age":18,"grads":"10"},{"name":"derek1","age":19,"grads":"9"},{"name":"derek3","age":20,"grads":"8"}];}
}
module.exports = HomeController;

后端访问腾讯AI智能闲聊（采用的GET请求方式）

router.js中的需要定义的函数：

router.get('/text2', controller.home.text2);

（nodejs中app->counter->home.js）

 async text2() {const { ctx } = this;console.log(ctx.request.query);//打印前端发来的信息//1.把前端的发过来的数据发送过AI，改地址是在腾旭AI中接力能力后获取的文档中的信息var url="https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat";var obj = {app_id: 2154766358,//申请应用时分配的session: 'zcx',//为了让AI知道是与同一个人在进行聊天（随便写）question: ctx.request.query.info,//用户会话信息（info是在微信js中定义的）time_stamp: parseInt((new Date().getTime() / 1000)),nonce_str: parseInt((new Date().getTime() / 1000)),sign: ''//签名信息，下面会计算};//以下为签名信息（sign）的计算过程//1const newkey = Object.keys(obj).sort();var params = {};for (var i = 0; i < newkey.length; i++) {params[newkey[i]] = obj[newkey[i]];}//2let str = '';for (const k in params) {if (params.hasOwnProperty(k) && params[k]) {str += k + '=' + encodeURIComponent(params[k]) + '&';}}//3str += 'app_key=' + 'o4ZCz3Mmzy5dTeeZ';//4//要去node小黑框中下载: npm i md5 --save  还要引入:const md5=require("md5")var singstr=md5(str).toUpperCase();//5，设置签名obj.sign=singstr;//准备工作完成，即可发送给腾讯AI进行处理var result= await this.ctx.curl(url,{dataType:"json",//获取数据格式（文档中有细说）data:obj,})console.log(result)ctx.body = result;//AI返回的数据，微信前端在这里获取}

前端接收AI返回的是数据并处理

在此之前，需要做的是腾讯ai开放平台
申请ai应用: https://ai.qq.com/
==>获取App_ID和App_Key，以下代码需要使用

// 发送按钮的点击事件
adddata:function(){//这里是给data中定义的数组加入新元素var new_data=this.data.arr;new_data.push({tag:true,text:this.data.inputvalue,//获取data中的inputvalue变量（该变量与输入框相绑定）head:"../../inco/1.jpg"})this.setData({arr:new_data})//重新刷新一次数组（存储的聊天记录）this.setData({scrolltop:1000})//改参数是为了使聊天记录时钟置低（与wxml中的scroll-view的scroll-top参数相照应）//发送数据（下面data中的内容）给后端，并用success获取后端返回的数据wx.request({url: 'http://192.168.0.101:7001/text2',//后端地址//发送信息给后端data:{info:this.data.inputvalue},success:(res)=>{//处理AI发送过来的json信息console.log(res.data.data.data.answer);this.data.arr.push({tag:false,text:res.data.data.data.answer,head:"../../inco/2.jpg"})this.setData({arr:this.data.arr})this.setData({scrolltop:1000})}})},

智能聊天效果图