小程序开发流程

1.wx、uniapp、taro全局配置

1.1wx全局配置（app.json）文档：app.json

pages：页面的构建

"pages": [
    "pages/home/home",
  ],//页面的构建

window：全局样式的配置

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#009be0",
  "navigationBarTitleText": "逆战",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true,
  "backgroundColor": "#ccc"
},

tabBar：底部导航栏

"tabBar": {
    "borderStyle": "white",
    "color": "#000",
    "selectedColor": "#0ad",
    "backgroundColor": "#ffe",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "resources/home.png",
        "selectedIconPath": "resources/home_active.png"
      },
    ]
  }

等等一些配置

1.2uniapp全局配置（pages.json）

pages：页面的构建

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
            "path" : "pages/home/home",
            "style" : {
				"navigationBarTitleText": "首页",
				"enablePullDownRefresh":true
			}
        }
    ]

globalStyle：全局样式

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "嗨购",
		"navigationBarBackgroundColor": "#009be0",
		"backgroundColor": "#F8F8F8"
	},

tabBar底部导航与WX相同
等等一些配置

1.3taro全局配置（pages.json）

pages：页面的构建（src/app.jsx中）

pages: [
      'pages/home/index',
    ]

window（全局样式配置）和tabBar（底部导航栏）与WX相同
注意：均为单引号

---

2.wx、uniapp、taro页面配置

2.1wx页面配置(pages/xx/xx.json) 文档：页面配置

2.1.1页面样式配置:等等一些配置

{
  "navigationBarTextStyle": "white",//	导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "逆战", //导航栏标题文字内容
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light",//下拉 loading 的样式，仅支持 dark / light	
  "enablePullDownRefresh": true //是否开启当前页面下拉刷新
}  

2.1.2钩子函数
全局的有：
onLaunch(监听小程序初始化)
onShow(监听小程序启动或切前台)
onHide(监听小程序切后台)
onError(错误监听函数)
onPageNotFound(页面不存在监听函数，也就是监听404)
onUnhandledRejection(未处理的Promise拒绝事件监听函数)
页面的有：
onLoad(监听页面加载)
onShow(监听页面显示)
onReady(监听页面初次渲染完成)
onHide(监听页面隐藏)
onUnload(监听页面卸载)
onPullDownRefresh(监听用户下拉动作)
onReachBottom(页面上拉触底事件的处理函数)
onShareAppMessage(用户点击右上角转发)
onPageScroll(页面滚动触发事件的处理函数)
onResize(页面尺寸改变时触发)

2.2uniapp页面配置(pages.json) 文档：页面配置

2.2.1页面样式配置:等等一些配置

2.2.2钩子函数
与vue钩子函数相同 包含wx钩子函数，如：onLoad等

2.3taro页面配置(pages/xx/xx.jsx)

2.3.1页面样式配置:等等一些配置

 config = {   //在config 中配置
    navigationBarTitleText: '首页'
  }

2.3.2钩子函数
与reacte钩子函数相同

---

3.wx、uniapp、taro API的使用（三者大同小异）WX文档：API

wx：头为wx；
uniapp：头为uni；
taro ：头为Taro ；

3.1显示消息提示框：wx.showToast（可封装）

export function toast(options){
  const { title, icon, duration } = options
    wx.showToast({
      title,
      icon: icon||'none',
      duration: duration|| 2000
    })
}

3.2显示 loading 提示框：wx.showLoading

wx.showLoading({   //展示
  title: '加载中',
})
wx.hideLoading()  //结束

3.3下拉刷新（停止/开始）：wx.stopPullDownRefresh&wx.startPullDownRefresh

wx和uniapp需要在自身样式或者全局样式中开启

"enablePullDownRefresh": true //是否开启当前页面下拉刷新

wx.stopPullDownRefres()  //停止当前页面下拉刷新
wx.startPullDownRefresh()  //开启当前页面下拉刷新

3.4滚动：wx.pageScrollTo（常作为返回顶部）

wx.pageScrollTo({
  scrollTop: 0,  //滚动到页面的目标位置，单位 px  0即为顶部
  duration: 300  //滚动动画的时长，单位 ms
})

3.5网路请求：wx.request

const baseUrl = 'xxxxxxxxxxxxxxxxxxxxx(自己设置头)'
export function request(options) {
  // 解构赋值 ---  获取用户传递的参数信息
  const { url, data, method,header } = options;
  // 加载动画 https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
  wx.showLoading({    //loading展示
    title: '加载中',
  })
  // 核心点 异步 A方法请求，B方法调用
  // 回调函数、promise、generator + yield、async+await
  return new Promise((resolve, reject) => {
    wx.request({
      url: baseUrl + url,
      data: data || {},
      method:method||'GET', 
      header:header ||{},
      success: (res) => {
        // 异步操作成功调用resolve
        resolve(res)
      },
      fail: (err) => {
        // 异步操作失败调用reject
        reject(err)
      },
      complete: () => {
        // 成功也好，失败也罢，都是已完成
        wx.hideLoading()  //loading结束
      }
    })
  })
}

3.6获取定位：wx.getLocation

wx.getLocation({
        success: (res) => {
          console.log(res)
          const { longitude, latitude } = res
          this.setData({
            longitude, latitude, //经度
            markers: [{   //一些配置
              id: 1,
              longitude, latitude, // 维度
              iconPath: '/resources/map/flag.png',
              width: 40,
              height: 40,
              callout: {
                content: '疫情在家养老',
                color: '#f66',
                fontSize: 14,
                borderRadius: 10,
                borderWidth: 5,
                bgColor: 'white',
                padding: 10,
                display: 'BYCLICK', //  'BYCLICK': 点击显示; 'ALWAYS': 常显
                textAlign: 'center'
              }
            }]
          })
        }
      })

3.7本地存储：wx.setStorageSync&wx.setStorageSync

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

try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

等等等等等API…