微信小程序项目技术点整理

停工不停学 逆战中成长

小程序的配置分为：全局配置、页面配置和sitemap配置

常用的全局配置选项app.json文件：

{
  //在json文件中其实是不能有注释的，这里我简单做一些解释
  "pages": [	//pages为页面路径列表
    "pages/home/home",
    "pages/kind/kind",
    "pages/cart/cart",
    "pages/user/user",
    "pages/detail/detail",
    "pages/map/map"
  ],
  "window": {	 //window为全局的默认窗口表现
    "navigationBarBackgroundColor": "#f66",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "橘子商城",
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "dark",
    "backgroundColorTop": "#0f0",
    "onReachBottomDistance": 50
  },
  "tabBar": {	//tabBar为底部tab导航栏表现
    "color": "#333",
    "selectedColor": "#f66",
    "backgroundColor": "#efefef",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/resources/home.png",
        "selectedIconPath": "/resources/home_active.png"
      },
      {
        "pagePath": "pages/kind/kind",
        "text": "分类",
        "iconPath": "/resources/kind.png",
        "selectedIconPath": "/resources/kind_active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/resources/cart.png",
        "selectedIconPath": "/resources/cart_active.png"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的",
        "iconPath": "/resources/user.png",
        "selectedIconPath": "/resources/user_active.png"
      }
    ]
  },
  "networkTimeout": {	//网络请求超时
    "request": 6000,
    "connectSocket": 5000,
    "uploadFile": 4000,
    "downloadFile": 5000
  },
  "permission": {	//小程序接口权限相关设置
    "scope.userLocation": {
      "desc": "小程序位置信息展示"
    }
  },
  "navigateToMiniProgramAppIdList": [	//需要跳转的小程序列表
    "wx5dfe0dd623d5ae6b"
  ],
  "sitemapLocation": "sitemap.json"	//指明 sitemap.json 的位置
}

常用的页面配置选项：

{
  "navigationBarBackgroundColor": "#ff4001",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "橘子商城-首页",
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50,
  "disableScroll": false,
  "usingComponents": {
    "prolist": "/components/prolist/prolist"
  }
}

常用的sitemap配置选项：

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

wx.request网络请求封装：

const baseURL = '自己的基础的接口地址'

export default function (options) {
//当在请求数据时，显示加载中的loading效果
  wx.showLoading({
    title: '加载中',
  })
  
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseURL + options.url,
      method: options.method || "GET",
      data: options.data || {},
      success: resolve,
      fail: reject,
      complete: () => {
      //当请求完成时（不管是请求成功，还是失败）都要隐藏消息提示框
        wx.hideLoading()
      }
    })
  })
}

路由跳转方式：

声明式导航：

<navigator url="/pages/···/···?id=' + id"  open-type=" "></navigator>
open-type 
    navigate 保留当前页面，新添加一个页面，不能新添加tab页面 ---- push
    redirect 替换当前页面，不能替换tab页面  ---- replace
    switchTab 切换当前的tab页面 ---  小程序独属
    navigateBack 返回  ----  back  goBack

编程式导航

//通过点击事件触发wx.navgatorTo()方法
handlePush  () {
  wx.navgatorTo({
    //通过两种方法都可以
    url= '/pages/xxx/xxx?id=' + id 
    url=`/pages/xxx/xxx?id=${id}`
  })
}