微信小程序api

// 定义域名或地址
let URL = "https://route.showapi.com"
export default URL

import URL from './config.js'
/* 定义promise版本的网络请求方法 options: { url data:{} method header } */
export default (options)=> { 
   
    //封装地址
    let url = URL + options.url
    return new Promise((resolve,reject)=>{ 
   
		wx.request({ 
   
            url,
            data:options.data || { 
   },
            header:options.header || { 
   
                "content-type": "application/json"
            },
            success:res=>{ 
   resolve(res)},
            fail:err=>{ 
   reject(err)}
        })
    })
}

//引入网络请求模块
import http from '../../utils/http.js'
//使用promise版本请求
http({ 
   
    url: '....'
}).then(res=>{ 
   
   this.setData({ 
   
       ...
   })
       
  // 存储到本地缓存一份
       wx.setStroageSync('list',...)
})

//缓存数据列表，减少每次网络请求开销
 onLoad: function (options) { 
   
    //判断缓存中是否有分类数据
    let list = wx.getStorageSync('list')
    if(list === '') { 
   
      //没有数据重新请求获取数据
      this.getList()
    }else { 
   
      // 有数据直接使用
      console.log('走缓存了');
      this.setData({ 
   list})
    }

  },

// 显示导航栏加载动画
wx.showNavigationBarLoadingg()
//动态设置标题内容
wx.setNavigationBarTitle({ 
   
    title: classfiy
})
//动态设置标题颜色（背景色，前景色）
wx.setNavigatiinBarColor({ 
   
    fontColor: "#ffffff",
    backgroundColor: "#ff0000",
    animation: { 
   
        duration: 1500,
        timingFunc:'easeIn'
    }
})

//定义数据加载更新提示的方法
const load = (title)=>{ 
   
	//提示数据加载中
    wx.showLoading({ 
   
        title
    })
    //显示导航栏加载动画
    wx.showNavigationBarLoading()
}
//定义关闭加载更新提示的方法
const hideLoad=()=>{ 
   
    wx.hideNavigationBarLoading()
    wx.hideLoading()
}
//导出
module.exports={ 
   
    load,
    hideLoad
}

wx.getSetting()

wx.authorize()

wx.openSetting() 
//此方法不能直接调用，需要引导 用户主动触发，如通过点击事件或者消息对话框
//直接使用会报错

//检测需要的权限是否授权
    wx.getSetting({ 
   
        
        //使用录音接口
        //wx.startRecord()
        
      success:res=>{ 
   
        //获取授权情况列表(默认只展示向用户青丘国的权限 有四个除外)
        if(!res.authSetting["scope.record"]) { 
   
          //引导用户授权
          wx.authorize({ 
   
            scope:'socpe.record',
            success:res=>{ 
   
              console.log('用户同意了');
            },
            fail:err=>{ 
   
              console.log('用户拒绝了');
              //再次唤起权限设置页面
              // 通过弹窗海报流程图是以用户授权
              //通过api函数可以直接唤起权限设置列表
              // (开发者不能直接使用，需要引导用户触发此函数)
              wx.showModal({ 
   
                title:'权限不足',
                content:'是否授权',
                concelText:'再想想',
                cancelColor:'red',
                confirmColor:'green',
                confirmText:'ok',
                success:res=>{ 
   
                  if(res.confirm) { 
   
                   wx.openSetting({ 
   
                     success:res=>{ 
   
                       console.log(11,res);
                     },
                     fail:err=>{ 
   
                       console.log(22,err);
                     }
                   })
                  }else { 
   
                    console.log('用户态度很坚决');
                  }
                }
              })
            }
          })
        }else { 
   
          //已经授权 使用即可
          console.log('已经授权使用即可');
        }
      }
    })

<view>
  <block wx:if="{ 
    {buffer}}">
    <image src="{ 
    {userInfo.avataUrl}}"></image>
    <text>{
  
  {userInfo.nickName}}</text>
  </block>
  <button wx:else bindtap="getUerInfo">获取您的信息</button>
</view>

  data: { 
   
    buffer: false,
    userInfo: { 
   } // 用户的信息
  },
  getUserInfo() { 
   
    wx.getUserProfile({ 
   
      desc: '完善会员信息',
      success: res => { 
   
        //赋值展示用户的信息
        this.setData({ 
   
          userInfo: res.userInfo,
          buffer: true
        })
        //讲获取到的用户信息存储到本地缓存中
        wx.setStorageSync('userInfo', res.userInfo)
      },
      fail: err => { 
    console.log(22, err); }
    })
  },

onLoad: function (options) { 
   
    //获取缓存中的用户信息
    let userInfo = wx.getStorageSync('userInfo') || ''
    if (userInfo == '') { 
   
      wx.showToast({ 
   
        title: '请先授权',
        icon: 'error',
        image: '../../images/icon/ssFull.png',
        mask: true
      })
    } else { 
   
      //直接示意数据展示即可
      this.setData({ 
    usesInfo, buffer: true })
    }
  },

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

wx.login()
通过微信登录获取用户的临时登录令牌code码，code有效期是5分钟，接着讲code码发送给自己的服务端，服务端获取用户在微信上的session_key(加解密用户私密数据的钥匙)和用户的openid（用户唯一标识符），进而自己的服务端可以通过session_key来解密用户的私密数据，如手机号、微信运动步数等

getPhone(e) { 
   
    //解构获取返回的加密数据 和加密向量
    let { 
   encrypteData,iv} = e.detail
    //获取用户登录微信服务器的令牌code(有效期5分钟)
    wx.login({ 
   
     success:res=>{ 
   
       console.log(res);
       //将加密数据发送给服务端进行解密
       wx.request({ 
   
         url:'http://cesho.com',
         data:{ 
   
           encrypteData,
           iv,
           code:res.code
         },success:res=>{ 
   
           //成功返回
           console.log(res);
         }
       })
     }
    })
  },

首先在app.json文件中添加如下配置
"userExtendeLib": { 
   
    "weui":true
}

像使用自定义组件一样，注册要使用的组件即可
1.全局注册
app.json
	"usinComponents": { 
   
        "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
    }
2.局部注册
page.json
	"uingComponents": { 
   
        "mp-navigation-bar": "weui-miniprogram/navigation-bar/navigation-bar"
    }

<mp-navigation-bar background="red" back="{ 
    {false}}" >
  <!---绘制左侧区域-->
  <view slot='left'>
    <text>首页|</text>
    <text bindtap="back">返回</text>
  </view>
  <!--绘制中间区域-->
  <view slot="center">
    <icon type="search" color="white"></icon>
    <text>订单查询</text>
  </view>
</mp-navigation-bar>
<mp-searchbar></mp-searchbar>

app.js
onLunch:function() { 
   
    if(!wx.clound) { 
   
        console.log('请使用2.2.3或以上的基础库以使用云能力')
    }else { 
   
        //云环境初始化
        wx.clound.init({ 
   
            env: '...', //填写环境id,可在云控制台查看
            traceUser:true //时候记录用户访问记录到控制台可见
        })
    }
}

1.数据库初始化
获取操作数据库的引用
const db = wx.clound.database()
console.log(db)
2.添加数据
首先创建集合
addData() { 
   
    //callback风格
    db.coleciton('demo').add({ 
   
        data: { 
   
            name: '张三',
            age: 18
        },
        success:res=>{ 
   console.log(res)},
        fail:err=>{ 
   console.log(err)}
    })
    
   // promise
	db.collection('demo').add({ 
   
        data: { 
   
            name:'zhansan',
            age:20
        }
    }).then(res=>{ 
   console.log(re)})
}

3.查询数据
//获取所有数据 小程序端每次只能返回20条记录 云函数端可以返回100条
addData() { 
   
    db.collection('demo').get().then(res=>{ 
   console.log(res)})
}
//根据id
idData() { 
   
    db.collection('demo').doc('54ad1eea61cdc34101c2249a2c2d8cf1').get().then(res=>{ 
   console.lof(res)})
}
//根据where
whereData() { 
   
	db.collection('demo').where({ 
   
        name:'zhangsan'
    }).get().then(res=>{ 
   console.log(res)})
    
    db.collection('demo').where({ 
   
        id:'54ad1eea61cdc34101c2249a2c2d8cf1'
    }).get().then(res=>{ 
   console.log(res)})
}

//下载图片资源
download() { 
   
    wx.clound.downloadFile({ 
   
        fildID: '........',  //文件ID
        success: res=>{ 
   
            //返回临时文件路径
            console.log(res.tempFilePath)
            //保存到相册
            wx.saveImageToPhotosAlbm({ 
   
                filePath:res.tempFilePath,
                success:res=>{ 
   
                    console.log('保存成功')
                }
            })
        },
        fai:err=>console.log(err)
    })
},
    
 // 上传文件 第三方存储空间 七牛云 阿里oss
    upload() { 
   
        // 1.获取本地资源（获取本地图片资源）
        wx.chooseImage({ 
   
            count: 1,
            sizeType: ['originall','compressed'],
            sourceType: ['album','camera'],
            success:res=>{ 
   
                //tempFilePath可以做欸img标签的src属性显示图片
                const tempFilePaths = res.tempFilePaths[0]
                console.log(tempFilePaths)
                //生成新的图片名称（为了避免用户资源冲突 图片丢失覆盖）
                let suffix = tempFilePaths.split('.').pop()
                let newImg = new Date().getTime()+'.'+suffix
                //console.log(newImg)
                //将本地资源上传至云端（云存储）
                wx.cloud.uploadFile({ 
   
                    clloudPath: '..../'+newImg, //上传至云端的路径 
                    filePath:tempFilePaths, // 小程序临时文件路径
                    success:res=>{ 
   
                        //返回文件ID存储到数据库中
                        console.log(res.fileID)
                    },
                    fail:console.error
                })
            }
        })
    }

1.在项目中指定云函数根目录，然后需要在project.config.json中指定云函数根目录
"cloundfunctionRoot": "cloundFunctions/"

2.右键云函数根目录指定云服务环境，指定后会自动同步当前环境下的所有云函数

3.新建云函数，在云函数根目录上右键选择新建node.js云函数即可，第一次回自动上传，后期如果修改此函数需要手动上传

4.编辑云函数内容
注：每次修改完本地的云函数后一定上传同步到云端
//云函数入口文件 可以方便在云函数中操作数据库 云存储 云函数
const cloud = require('wx-server-sdk')
//云函数端环境初始化 wx.cloud.init() 以下是操作dev环境中的资源
cloud.init({ 
   env:'...'})

//云函数入口函数 commonjs语法规范导出函数
exports.main = async(event,context)=>{ 
   
    //event：调用此函数传递的参数，还有云服务端自定义注入的appid和openid
    //context：描述的此函数运行的上下文环境
    // return 1+1
    //操作数据库 云存储 云函数
    return event
}

5.在小程序端使用云函数
wx.clound.callFunction()
//使用云函数
getYun() { 
   
    wx.cloud.callFunction({ 
   
        name:'zzzz',
        data:{ 
   
            name:'zhangsan',
            age:20
        }
    }).then(res=>{ 
   console.log(res)})
}