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

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

（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）的计算过程
      //1
      const newkey = Object.keys(obj).sort();
      var params = {};
      for (var i = 0; i < newkey.length; i++) {
          params[newkey[i]] = obj[newkey[i]];
      }
      //2
      let str = '';
      for (const k in params) {
          if (params.hasOwnProperty(k) && params[k]) {
              str += k + '=' + encodeURIComponent(params[k]) + '&';
          }
      }
      //3
      str += '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})
    }
  })

},

智能聊天效果图