微信小程序

       1.微信小程序的基本操作：

                    首先在官方文档内搜索微信小程序在里面现在安装插件 

                          目录结构

目录

       1.微信小程序的基本操作：

                    首先在官方文档内搜索微信小程序在里面现在安装插件         

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

    

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	是	小程序公共样式表

 

全局配置：

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  //写page你所创建的项目路径
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  //项目的头部标题信息内容
  "window": {
    "navigationBarTitleText": "Demo"
  },
    //首先内容下面的按钮切换路由跳转
      语法规定必须要写至少两个
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
   
}

 页面的配置：

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

例如：

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

完整配置项说明请参考小程序页面配置

例如：

{
  "navigationBarBackgroundColor": "#ffffff",   背景的颜色
  "navigationBarTextStyle": "black",    //字体的颜色
  "navigationBarTitleText": "微信接口功能演示",   //当前页面的头部信息提示
  "backgroundColor": "#eeeeee",                  
  "backgroundTextStyle": "light",

}
  "usingComponents": {   //写vant weapp内容的导入
    "van-tab": "/ilb/vant/tab/",
    "van-tabs": "/ilb/vant/tabs/"
  },

在写项目：

1.配置全局的安装

1.1 在项目内创建一个config.js的文件：

1.      

   // 本地的公共请求接口
   const config = {
     //公共接口的封装
     api_base_url:"https://api-hmugo-web.itheima.net/api/public/v1"
   }
   export default config //导出接口

   1.2.在utils内写request.js文件

2. // 导入config的公共接口数据
   import config from "../config"
   
   const tips = {  //错误信息的提示
     1: '抱歉，出现了一个错误',
     200	:	"请求成功",
     201	:	"创建成功",
     202	:	"更新成功",
     204	:	"删除成功",
     301	:	"永久重定向",
     400 :	"请求包含不支持的参数",
     401	:	"未授权",
     403	:	"被禁止访问",
     404 :	"请求的资源不存在",
     413	:	"上传的File体积太大",
     500	: "内部错误",
     1000 :	"输入参数错误",
     1001 :	"输入的json格式不正确",
     1002 :	"找不到资源",
     1003 :	"未知错误",
     1004 :	"禁止访问",
     1005 :	"不正确的开发者key",
     1006 :	"服务器内部错误",
     2000 :	"你已经点过赞了",
     2001 :	"你还没点过赞",
     3000 :	"该期内容不存在"
   };
   
   
   class HTTP{     //es6的语法糖类属性
     request({ url,data={} ,method="GET" }){
   //promise可以解决回调地狱的问题
          return new Promise((resolve,reject)=>{  
                  this._request(url,resolve,reject,data,method)
          })
     }
       
   
     _request( url,resolve,reject,method="GET",data={} ){
       wx.request({ //微信小程序提供的，模式
         url: config.api_base_url+url, //拼接公共接口的样式
         method:method,  //
         data:data,
         success:(res)=>{ //请求成功
           const code = res.statusCode.toString();
           if(code.startsWith("2")){
             resolve(res)
           }else{
             reject();
             const error_code = res.data.error_code;
             this._show_error(error_code)
           }
         },
         fail : (error)=>{
           this._show_error()
         }
       })
     }
     _show_error(error_code){
       if(!error_code){
         error_code = 1;
       }
       const tip = tips[error_code];
       wx.showToast({
         title: tip ? tip : tips[1],
         icon : "none",
         duration : 1000
       })
     }
   }
   export {HTTP}// 导出模块

   1.3创建一个model模块

3. 可以在这里写一下数据的接口，可以方便后期的更改和使用效果

4. //需要先导入request的文件
   import {HTTP} from "../utils/requset"
   
   //你所写的接口内容
   class IndexModel extends HTTP{
     // 获取数据主见
     getscroll(){
       return this.request({
         url:"/categories",
         method:'GET'
       })
     }
   }
   // 导出
   export  {IndexModel}