微信小程序开发过程

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

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

项目介绍

项目初始架构-|Pages---|index-----|index.js-----|index.wxml-----|index.wxss-|utils-|app.js-|app.json-|app.wxss

项目文件类型介绍重点介绍下app.js//app.jsApp({ //初始化操作，可以在这里做一些获取权限和用户登陆的操作 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':'Home'}，{'pagePath':'pages/logs/logs'，'text':'Log'}]} ，//设置网络超时'networkTimeout': {'request': 10000，'downloadFile': 10000}，//设置是否启用debug'debug': true} Page.js文件是一个脚本文件，负责处理当前页面逻辑。 页面（{/** *初始页面数据，* /数据: {}，/** *生命周期函数 - 监听器页面加载*/onLoad:函数（选项）{}，/** *生命周期函数 - - 听力页面初始化渲染完成*/onReady: function（）{}，/** *生命周期功能 - 听力页面显示*/onShow: function（）{}，/** *生命周期功能 - 监听页面隐藏*/onHide: function（）{ }，/** *生命周期函数 - 监听页面卸载*/onUnload: function（）{}，/** *页面相关事件处理程序 - 监听器用户下拉操作*/onPullDownRefresh: function（）{}，/** *页面上拉事件的处理程序*/onReachBottom: function（）{}，/** *用户点击右上角共享*/onShareAppMessage: function（）{}}）Page.json是一个配置文件，只有[窗口相关配置项] Page.wxss是一个样式文件，类似于css文件Page.wxml是一个页面，可以理解为jsp的xml版本。

小程序的不同跳转页面方法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-wrapnowrap（默认）：不换行。wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。

flex-flowflex-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模块化处理。

参考链接小程序官网教程相关资源地址分享icon网站

xxxx