微信小程序开发流程

前言

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

创建项目

点击链接，进入登陆页面。

点击【设置】【开发设置】查看并记录【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模块化处理。

参考链接

小程序官网教程

相关资源地址分享

icon网站

微信小程序布局display flex布局介绍