mini小程序入坑说明

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
  },
  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
  },
  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
  },
  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
  }
})

Page({
  /**
   * 页面的初始数据，类似于 react class 组件中的 state。
   * 要修改 data 中的数据，调用 setData() 方法来修改
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

navigationStyle:custom //自定义导航条样式
onReachBottomDistance:number //上拉处理距离底部高度
subpackage:object[] //分包
perimission:object //权限获取

<scroll-view
scroll-x = "true" //字符串
scroll-x = "{{ true }}" //布尔值
/>
<!-- 列表渲染 item固定名称--> 
<text 
      wx:for= “{{ cat }}”
      wx:key= "id"
>
    <!--item代表名称 index代表索引-->
    {{item}} 分类名称 {{index}}
</text>

data:{
    //初始数据
    cat:[
        {}
    ]
}

wx.request({
    url:'',
    success:res=>{
        //数据处理-状态为200，处理返回数据
        if(res.statusCode===200){
            const { code,data } = res.data
            if(code ===200 ){
                //调用setData修改数据
                this.setData(
                  cat:data.list
                )
            }
        }
    },
    fail:err=>{},
})

/**
 * wx.request() 方法的二次封装处理
 */
const baseURL = 'http://quanzhan.site:3000'
const request = ({url, data, header = {}, method = 'GET'} = {}) => {
  // 新 new Promise() 创建的 Promise 对象的状态是 pending 待定状态
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + url, // 在访问接口前拼接统一的 baseURL
      data, // 请求发送给后端的数据
      header: { // 请求头
        ...header,
        'X-Token': 'token string.............', // 携带 token 认证字段
      },
      timeout: 5000, // 请求超时时间
      method, // 请求方法，默认为 GET
      success: res => { // 请求成功的回调函数
        if (res.statusCode === 200) { // HTTP状态码为 200 表示 OK
          // res.data 中保存的是后端向前端返回的数据
          // 通常后端与前端交互时有统一的规范，比如返回一个对象，有 code 与 data、message 属性。
          // 当前接口规范中，code 为 200 表示后端向前端返回成功的数据。
          // 返回的数据在 data 属性中。
          const {code, data} = res.data
          if (code === 200) {
            resolve(data) // 将 Promise 的状态修改为 fulfilled 成功状态，并携带成功的数据
            return
          }
        }
        // 如果 HTTP 状态码或后端返回的 code 表示有误时，将
        // Promise 状态修改为 rejected 失败状态，携带失败原因。
        const error = new Error('接口访问有误')
        reject(error)
      },
      fail: err => { // 请求失败
        // 将 Promise 状态标记为失败状态
        reject(err)
      },
    })
  })
}
// 利用 CommonJS 规范中的 module.exports 导出当前文件中定义的 request 方法
module.exports = request

<swiper
  indicator-dots //显示面板指示点
  autoplay //自动播放
  duration //500m内完成滑动
  ...
>  
------------------------------------------------
  <!-- 轮播图 -->
    <swiper
      indicator-dots
      autoplay
    >
      <block wx:for="{{ banners }}" wx:key="id">
      <swiper-item>
        <image src="{{item.image}}" style="width:100%;height:100%"></image>
      </swiper-item>
      </block>
    </swiper>

if(this.data.isEnd){
      console.log('到底了');
      return 
    }
    console.log('...');
    //触底发送网络请求
    let data = await request({
      url:'/api/tab/1/feeds?start=' + this.data.nextIndex
    })
    console.log('触底：',data);
    this.setData({
      //!this.date.list
      productList:this.data.productList.concat(data.list),
      isEnd:data.isEnd,
      nextIndex:data.nextIndex,
    })

<view wx:if="{{ !isEnd }}">加载中...</view>
<view wx:else="{{ isEnd }}">我是有底线的！！</view>

navigator组件
<navigator to="/....">
// 跳转到其他小程序 - 需要app-id配置
// 跳转到当前小程序其他页面
//图像绑定点击事件 300ms之内为短按 tap 长按longpress
bindtap = "handleBing"
data-id = "{{ item.id }}" !!
js文件中:添加属性 js逻辑使用 ---
handleBing:(event)=>{
    //event.target.dataset => data-自定义的数据获取
    //编程式导航跳转 -API路由
    //=》什么是tabbar页面 - 不能跳到tabbar页面 - tabbar绑定的页面
    wx.navigatorTo({
        url:'/...?id=' + event.target.dataset.id
    })
}

 <navigator url="/pages/details/index?id={{item.id}}">

 <text bindtap="handleDetail" data-id="{{item.id}}">{{item.title}}</text>
   // 点击跳转函数
  handleDetail:(event)=>{
    console.log('.....',event.target);
    wx.navigateTo({
      url:'/pages/details/index?id=' + event.target.dataset.id 
    })
  }

 /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (query) {
    console.log('details:id',query);
  },

 <!-- 点击跳转到分类页面0tabbar页面 -->
      <text
        bindtap="handleCategory"
        wx:for="{{ categories }}"
        wx:key= "id"
      >{{item.name}}</text>

wx.switchTab({
  url:'/pages/details/index'
})
-------
<navigator open-type = 'switchTab'> <navigator>
存storage:
  // 导航跳转tabbar页面
  handleCategory:(event)=>{
    // 点击哪个分类传递对应分类id,查询数据
    wx.setStorageSync('cid', event.target.dataset.id)
    wx.switchTab({
      url: '/pages/category/index',
    })
  }
取storage
  /**
   * 生命周期函数--监听页面显示onShow
   */
  onShow: function () {
    let data = wx.getStorageSync('cid')
    console.log('cid',data);
  },

//自定义全局共享数据
globalData:{
    cid:0,
}

//得到整个app对象
const app = getApp()
//存取
app.globalData.cid = event.target.dataset.id
//读取
const cid = app.globalData.cid

<button bindtap="handleLogin">点击</button>
----------------
//登录
handleLogin(){
    wx.getUserProfile({
      desc: '描述用户信息',
      success(data){
        console.log("success",data);
      },
      fail(erro){
        console.log(erro);
      }
    })
  }
---------------------
wx.getUserProfile({ //弹出授权框框
    desc:'描述使用用户信息'
    success:res=>{}, //res.userInfo 拿到头像和昵称
    fail:err=>{}
})

 <!-- 相机 -->
    <view>
      <button bindtap="takephoto">拍照</button>
      <button bindtap="changePosition">切换摄像头</button>
      <camera 
        style="height: 200px;width: 100%;"
        mode="normal"
        flash="on"
        device-position="{{ position }}"  //改变摄像头朝向
      ></camera>
      <text>拍照的图片为：</text>
      <image src="{{ tempImagePath }}"></image>
    </view>

//拍照
  takephoto(){
    //创建相机上下文对象
    const cameraContext = wx.createCameraContext()
    //调用拍照方法
    cameraContext.takePhoto({
        success:(data)=>{
          console.log('拍照成功',data);
          this.setData({
            //保存拍照图片地址
            tempImagePath:data.tempImagePath,
          })
        },
        fail:(error)=>{
          console.log('拍照失败',error);
        }
    })
//扫码
扫码成功触发handleScancode - 打印event对象 event.detail....
<!-- 扫码 -->
      <camera 
        style="height: 200px;width: 100%;"
        mode="scanCode" 
        device-position="back"
        bindscancode="handleScancode" 
      ></camera>
        //扫码成功后的回调
  handleScancode(event){
    console.log('扫码成功：',event.detail);
  },

wx.chooseMedia() //可以录视频
wx.chooseImage()
wx.chooseMedia()
wx.scanCode({
    ...
})
---------------
handleCamera(){
    let _this = this
    //API实现上传视频
    wx.chooseMedia({
      success(data){
        console.log('上传视频：',data);
        _this.setData({
          tempImagePath:data.tempFiles[0].tempFilePath
        })
      }
    })
    //API实现上传图片
    wx.chooseImage({
      count:2,
      success(data){
        console.log('成功回调：',data);
        _this.setData({
          tempImagePath:data.tempFilePaths
        })
      },
      fail(data){
        console.log('失败回调',data);
      }
    })
  },

<map
// 地图中心是哪里 - 经纬度
     langitude="经",
     latitude="纬"
     markers="标记点"
     show-location = "带有方向的定位点" //手机测试准确
     enable-traffic = '{{true}}' // 实时路况
     ></map>
---------------------
 详情页-详情页-地图
  <map
    longitude="104.066646"
    latitude="30.671305"
    show-location="{{true}}"
    enable-traffic="{{true}}"
  ></map>
page,view{
    w100%,
    h100%,
}

wx.updateWeChatApp({
    //监视客户版本过低，小程序不支持，会自动跳转到更新微信页面
}) 

{ //json文件是个对象
    "component":true,// 自定义组件声明
}

//组件函数 =》自定义组件中的js是个组件函数
component({
    properties:{
      //只读 - 类型校验
        item:{type:Object}
    },
    data:{
      //内部数据
    },
    methods:{
    },
})

//哪个页面使用，就在它的json文件标注：
  "usingComponents": {
    "xiaolan-upup":"/components/backTop/index"
  }
----------
{
    "usingComponent":{
        "自定义组件名字":"/文件路径"
    }
}

loading:true, //骨架屏显示与否
-------------------------------------
setTimeout( async()=>{
    try {
      let [cateData,homeData] =await Promise.allSettled([
        request({ url:'/api/tabs'}),
        request({ url:'/api/tab/1'})
      ])
      // console.log('data:all',homeData,cateData);
      this.setData({
        categories:cateData.value.list,
        banners:homeData.value.banners,
        productList:homeData.value.items.list,
        loading:false, //加载完数据后将骨架屏撤掉
      })
    } catch (error) {
      console.error(error)
    }
   },5000)

"van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"

<!-- #ifdef APP-PLUS --> 
// #ifdef H5
------------在注释中写这些！！---------
原生APP  平台代码
#endif
#ifdef H5 
浏览器中才有
#endif
#ifdef MP-WEIXIN
微信小程序中才有
#endif