前言
- 前段日子，公司需要做一款小程序的产品。由于时间紧凑，需要有人独立负责，自己又对这方面比较感兴趣就接下来。为了以后开发方便，整理下开发流程，让同事及网友参考。
创建项目
- 点击，进入登陆页面。
- 点击【设置】【开发设置】查看并记录【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": "首页" }, { "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模块化处理。