微信小程序开发流程-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

前言

前段日子，公司需要做一款小程序的产品。由于时间紧凑，需要有人独立负责，自己又对这方面比较感兴趣就接下来。为了以后开发方便，整理下开发流程，让同事及网友参考。

创建项目

点击链接，进入登陆页面。
点击【设置】【开发设置】查看并记录【APPID】和【APPSecret】
下载开发者工具并安装
打开开发者工具，【微信登陆】，选择【创建项目】填入APPID及相应的项目名称和路径，勾选quickly start即可创建小程序实例。

项目介绍

项目初始架构

-|Pages
---|index
-----|index.js
-----|index.wxml
-----|index.wxss
-|utils
-|app.js
-|app.json
-|app.wxss

项目文件类型介绍

重点介绍下
app.js

//app.js
App({
  //初始化操作，可以在这里做一些获取权限和用户登陆的操作
  onLaunch: function () {
    // 登录
    wx.login({
    })
    // 获取用户信息
    wx.getSetting({
      
    })
  },
  //全局数据，可以将公用的数据存储到这边
  globalData: {
    userInfo: null
  }
})

app.wxss 全局公共样式定义
app.json 全局配置，例

{
  //配置页面路径，新建Page时必须在这边记录路径，否则会报错。
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //配置小程序的窗口背景色，配置导航条样式，配置默认标题
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }.
  //设置页面底部tab
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  //设置网络超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  //设置是否开启debug
  "debug": true
}

Page.js文件是脚本文件，负责处理当前页面的逻辑。

Page({

  /**
   * 页面的初始数据，
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

Page.json是配置文件,只能配置【window 相关的配置项】
Page.wxss是样式文件,类似为css文件
Page.wxml是页面，可以理解成xml版的jsp。

小程序的不同跳转页面方法

wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
wx.navigateBack(OBJECT)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。
wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。
wx.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。
wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

小程序 display flex布局

display：flex属性

flex-direction 决定项目的排列方向

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿

flex-wrap

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content 定义了项目在主轴上的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-content 定义项目在交叉轴上如何对齐

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

注意事项

小程序不能跳转外部链接
在测试请求时，可以关闭安全域名、TLS 版本以及 HTTPS 证书校验，操作为点击开发者工具右上方【详情】【项目设置】勾选【不校验安全域名、TLS 版本以及 HTTPS 证书】即可。
测试项目时可用console.log输出测试。
由于android，ios，开发工具的运行环境都不一样，所以注意少部分样式有偏差的问题。
小程序如果使用wx.navigateTo来进行跳转时，因为保留当前页面，跳转到应用内的某个页面，所以最多只能连续跳转【五个页面】
小程序最大存储空间为【10M】
js与js之间的调用用require('js的路径')的方式调用，类似js模块化处理。