【微信小程序 | 实战开发】配置开发环境、生产环境和API

{
  #pages添加页面路由的，添加一个路由，就是添加一个页面，谁的路径在第一个谁就是首页
  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs" 
  ],
 # "window":主要是配置下拉刷新和头部，以navigation开头的设置是头部，如果要下拉的出来，必须enablePullDownRefresh把这个配置设置成true
  "window": {
    "backgroundTextStyle": "dark",  # 下拉刷新的三个点(light/dark)
    "enablePullDownRefresh": true,  
    "navigationBarBackgroundColor": "#333",  # 头部背景颜色
    "navigationBarTitleText": "python13期",  # 头部文字
    "navigationBarTextStyle": "white"   # 文字颜色（black/white）
  },
# tabBar ：主要是配置页面下部的导航。显示顺序是和list里面的顺序一致，list里面最少两项，最多5项。
# 如果页面不在tabBar的list里面，就不会出现导航
  "tabBar": {
    "color": "#ffffff",   # 导航字体颜色
    "selectedColor": "#FFB6C1",  ￥# 导航字体被点击后的颜色
    "backgroundColor": "#333",  # 导航栏背景颜色
    "borderStyle": "white",   # 边框颜色
    "list": [{
      "pagePath": "pages/index/index",  # 导航路径
      "text": "index页面",   # 导航页说明
      "iconPath": "images/icon-2.png",    # 导航图路径
      "selectedIconPath": "images/icon-2-sed.png"   # 导航后图片路径
    },
    {
      "pagePath": "pages/test/test",
      "text": "test页面",
      "iconPath": "images/icon1.png",
      "selectedIconPath": "images/icon1-sed.png" 
    }
   ]
  },
}

#这个里可以对app.json中的window进行覆盖，如果页面没有配置就走全局，页面配置了，就走页面。但是页面的配置不需要加window，直接配置
{
  "usingComponents": {},
  "navigationBarTitleText":"test144"
}

/ pages/test/test.js
Page({
  /**
   * 页面的初始数据，初话数据是卸载data,里面的。
   */
  data: {
    msg:'own is sb',
    name:"tank",
    num :12,
    num1:1,
    flag:false,
    name_list:[{"name":"jason",love:"piao"},{name:"tank",love:"own"},{name:"egon",love:"洗脚"}],
    tank:{name:"tank",love:"own"},
    color:"blue"
  },
})

{
  "rules":[{
    "action": "allow",
    "page": "*"
  }]
}

{
  "rules":[{
    "action": "disallow",
    "page": "path/to/page"
  }]
}

wxml文件
```javascript
<view class="cls"></view>
#行内样式写法与原生的没有区别，可以调用变量来做属性值
<view style="color:{{color}}">asdas</view>

.cls{
  width: 400rpx;
  height: 400rpx;
  background-color: blue;
}

// baseurl
export const baseApi = function () {
  if (process.env.NODE_ENV === 'development') {
  console.log('开发环境')
  return 'http://ip地址:端口号/cloud_job'
  } else {
  console.log('生产环境')
  return 'https://IP地址/cloud_job'
  }
}
// baseSocket
export const baseSocket = function () {
  if (process.env.NODE_ENV === 'development') {
  console.log('开发环境长链接')
  return 'ws://IP地址:端口号/cloud_job/im'
  } else {
  console.log('生产环境长链接')  
  return 'wss://IP地址/cloud_job/im'
  }
}

import {baseApi} from 'utils/config.js'
baseApi()

import {baseApi} from './config.js'
// 封装请求方法
const request = (options, isHidding) => {
  let header = {
  "X-Access-Token": uni.getStorageSync('token') || '',
  "Content-type": options.contentType||"application/json"
  };
  if (!isHidding) {
  // uni.showLoading({
  //  title: "加载中",
  //  mask: true,
  // });
  }
  return new Promise((resolve, reject) => {
  uni.request({
    url: baseApi() + options.url,
    method: options.method || 'GET',
    data: options.data || {},
    header,
    success: (res) => {
    console.log('请求参数：',options.data)
    console.log('请求url：',options.url)
    console.log('接口数据：',res)
    if(res.data.code!=200&&res.data.code!=0){
      setTimeout(()=>{
      uni.showToast({
        title: res.data.message,
        duration: 2000,
        icon:"none"
      });
      },100)
      if(res.data.code==401){
      setTimeout(()=>{
        uni.redirectTo({
        url:'/pages/login/index'
        })
      },2000)
      }
      reject(res.data)
    }else{
      resolve(res.data.result)
    }
    },
    fail: (err) => {
    console.log('eeee',err)
    reject(err)
    },
    // 完成之后关闭加载效果
    complete: () => {
    // uni.hideLoading()
    }
  })
  })
}
// 定义http
const http = (url,method,data,isHidding=true,contentType="application/json") =>{
  let options = {
  url,
  method,
  data,
  contentType
  }
  return new Promise((resolve, reject) => {
  request(options,isHidding).then(res=>{
    resolve(res)
  }).catch(e=>{
    reject(e)
    console.log('错误消息：',e)
  })
  })
}
module.exports = {
  request,
  http
}

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

try {
  wx.setStorageSync('key', 'value')
} catch (e) {
  console.error(e)
}

wx.login({
  success(res) {
    console.log(res.code)
  }
})

// callback 形式调用
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})
// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

wx.cloud.callFunction({
  // 云函数名称
  name: 'cloudFunc',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result) // 示例
  },
  fail: console.error
})
// 此外，云函数同样支持 promise 形式调用