小程序开发总结（详细）

时间 2019-12-09

标签程序开发总结详细繁體版

原文原文链接

这段时间一直在作小程序，总结下。后续可能会不断更新，努力写仔细点，争取让人看到就能会写。css

一，页面结构。html

这基本是小程序的标准目录结构。咱们从上到下解释下：pages文件夹放置咱们全部用到的页面，基本是一个页面一个文件夹，相似模块。每一个页面中，有四个文件（有的可能不会有.json文件）。分别是:js/json/wxml/wxss.前端

.js:是页面的脚本文件，是必要的。在这个文件中咱们能够监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。node

.json：是页面的配置文件，页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。若是没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。jquery

.wxml：是页面的结构文件。是必要的。至关于咱们经常使用的html。css3

.wxss：是页面的样式表，页面的样式表是非必要的。git

接下来的目录是个public文件夹，这是我本身新建的文件夹，用来存放图片等。es6

下面是个tpl文件夹，template，就是存放页面所用到的模板文件。都是本身新建的。github

最下边是个utils文件夹，里面有一个utils.js，通常咱们会在其中放入一些公用类的方法，好比封装好的一些通用的方法。可供咱们随时调用。web

最下边是四个app.js/spp.json/app.wxss/project.config.json 其中的前三个，是整个项目的核心。

app.js是小程序的脚本代码。咱们能够在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.json是对整个小程序的全局配置。咱们能够在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口,背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释!

app.wxss是整个小程序的公共样式表。咱们能够在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

project.config.json是项目的配置文件，里面有咱们全部项目配置的信息，包括是否支持es6，appid等设置和信息。

……

二，wxhl语法

wxhl跟html同样，都有本身标签的语法规则。区别比较大的，div块元素，都是用<view></view>这种双标签。并且，不存在有h5新标签：header等。

img标签：<image></image> 双标签

文字标签:<text></text>双标签

a标签:<navigator url="../navigator/navigator?title=我是navi">跳转到新的页面</navigator> （同时也是页面跳转的一个方法）

更多的不一样，咱们不在标签上详细叙述。咱们来谈一谈，小程序最佳的布局方式。flex布局

什么是flex布局？

display：flex 是将元素做为弹性伸缩盒显示，早在css3就有。

举个例子：定义一个容器，里面包含几个子元素。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序开发</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端开发</a></div>
</div>

display flex容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

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

flex-wrap属性

默认状况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，若是一条轴线排不下，如何换行。

.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow

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

.box {
flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性

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

.box {

justify-content: flex-start | flex-end | center | space-between | space-around;
}

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

align-items属性

align-items属性定义项目在交叉轴上如何对齐

.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}

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

align-content属性

align-content属性定义了多根轴线的对齐方式。若是项目只有一根轴线，该属性不起做用。

.box {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性

如下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
order: <integer>;
}

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即若是存在剩余空间，也不放大。

.item {
flex-grow: <number>; /* default 0 */
}

若是全部项目的flex-grow属性都为1，则它们将等分剩余空间（若是有的话）。若是一个项目的flex-grow属性为2，其余项目都为1，则前者占据的剩余空间将比其余项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即若是空间不足，该项目将缩小。

.item {
flex-shrink: <number>; /* default 1 */
}

若是全部项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。若是一个项目的flex-shrink属性为0，其余项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间以前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

.item {
flex-basis: <length> | auto; /* default auto */
}

它能够设为跟width或height属性同样的值（好比350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，由于浏览器会推算相关值。

align-self属性

align-self属性容许单个项目有与其余项目不同的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若是没有父元素，则等同于stretch。

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其余都与align-items属性彻底一致。

这就是基本的flex布局，只能说，在小程序上，不要太好用。（注：flex布局内容来自阮一峰阮大大。原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

三，js 页面脚本配置。小程序的生命周期。

app.js页面

我截了个图，在app.js页面，咱们看到，全部都是由一个app();包裹。而它在咱们官方文档上，有着详细记录。

这是小程序页面js脚本的初始配置。

Page({

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

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

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

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

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

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

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

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

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

page()是在小程序上注册一个页面。详情如官方文档。

这部分再也不过多叙述，由于官网上写的真的是很详细。以后，会在这里更新一些日常开发中遇到的一些问题。先到这里吧，感谢阮大大的总结，能让我拿来就给大家展现。

2017/10/23-am:10:30

2017年11月02日上午 11：50

小程序开发总结（详细）

display flex容器的属性

flex-direction属性

flex-wrap属性

flex-flow

justify-content属性

align-items属性

align-content属性

项目的属性

order属性

flex-grow属性

flex-shrink属性

flex-basis属性

flex属性

align-self属性

wx-gesture-lock 微信小程序的手势密码

WXCustomSwitch 微信小程序自定义 Switch 组件模板

WeixinAppBdNovel 微信小程序demo：百度小说搜索

shitoujiandaobu 小程序：石头剪刀布（附代码说明）

audiodemo 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义

star 微信小程序开发之五星评分

switchCity 微信小程序开发之城市选择器 城市切换

huadong_del 微信小程序滑动删除效果

jianhang_menu 微信小程序开发之圆形菜单 仿建行圆形菜单

xiaoxiaoxiao_lazyload 实现微信小程序图片懒加载特效

kangaiduowei 微信小程序：康爱多微商城：学习界面设计

tianmao_dazhuanpan 小程序实现大转盘 仿天猫抽奖 跑马灯效果（有图有源码）

weapp-meirong 微信小程序学习用demo推荐：美容商城；列表，预定

baisi 微信小程序仿百思不得姐

weapp-one 仿 「ONE · 一个」 的微信小程序

netmusic-app 仿网易云音乐APP的微信小程序

a_takeaway 微信小程序的外卖demo

sideslip 微信小程序『侧边栏滑动』特效

wx_plo 微信小程序之仿微信漂流瓶

kwonWhere 微信小程序-知亦行

audiodemo 微信小程序开发之视频播放 弹幕 弹幕颜色自定义

wxChart 微信小程序图标插件

guoku 微信小程序-果库

snake 微信小程序-贪吃蛇小程序

douban_movie 微信小程序-仿豆瓣电影

RecordDemo 麦克风动画

shishanggou 实现了包括经常使用组件，ajax获取数据，模板使用，路由等的使用，下拉刷新数据；

jiajuzaixian 家具在线-演示如何使用下拉选项

wechat-app-ipinbb 爱拼宝宝-功能很是全的电商应用

TodayNews-wx 微信小程序-今日头条

WXNative-bpgg 奔跑果果-微信小程序

wechatapp-demo 是目前我发现的，实现实用功能较多的demo，推荐你们学习研究

weapp-MatterAssistant 微信小程序－事项助手

weapp-wymusic 微信小程序 仿网易云音乐

weapp-wechat-nearby 微信小程序-仿找事吧app附近三千米

bs 精简版百思不得姐

WXBaiSi 微信小程序版 百思不得姐

weapp-demo-breadtrip 基于面包旅行 API 制做的微信小程序示例

html-to-wxml 小程序中将html内容转化成wxml能够显示的内容，方便用于小程序中显示

kachezhijia 自卡车之家，有丰富的卡车司机和物流园区的资源，因此这个小程序能够说也是他们将来工做上的一个必将实施的项目。

WxEmojiView 微信小程序Emoji展现输入组件alpha 0.1

GankCamp-WechatAPP gank.io (干货集中营) 微信小程序 版本

wechat-JD 微信小程序仿京东首页

wechat-turntalbe-canvas 用微信小程序开发的Canvas绘制可配置的转盘抽奖。

mangguoTv 微信小应用-小程序-demo-仿芒果TV

wxreading 微信小程序跟读

WeChatMeiZhi 微信小程序版妹纸图 API from gank.io

CountDown 微信小程序倒计时组件

weapp-github 微信小程序--github

wechat-weapp-mapdemo 微信小程序开发demo-地图定位，很是简单的demo，只为了解一下微信小程序

wechat-cnode 微信小程序 cnode社区版

weapp-newsapp 微信小程序-公众号热门文章信息流

wechat-weapp-taobao 微信小程序demo 仿手机淘宝

timer 番茄时钟微信小程序版

wechat-app-music 微信小程序：音乐播放器 技术栈: redux + es7 +labrador

fenda-mock 使用微信小程序实现「分答」这款APP的基础功能

Wa-UI 针对微信小程序整合的一套UI库

wx-query 微信小程序 仿jQuery插件

weapp-artand 微信小程序 Artand

WeiXin-SmallApps-Information 微信小程序-仿今日头条

weapp-wechat-zhihu 微信中的知乎--微信小程序

WeApp 基于微信小程序开发的仿微信demo

SmallApp 微信小程序

wechat-v2ex 微信小程序-v2ex

weipiao 微信小程序-微票

audiodemo 微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义

switchCity 微信小程序开发之城市选择器城市切换

jianhang_menu 微信小程序开发之圆形菜单仿建行圆形菜单

tianmao_dazhuanpan 小程序实现大转盘仿天猫抽奖跑马灯效果（有图有源码）

weapp-one 仿「ONE · 一个」的微信小程序

audiodemo 微信小程序开发之视频播放弹幕弹幕颜色自定义

weapp-wymusic 微信小程序仿网易云音乐

WXBaiSi 微信小程序版百思不得姐

GankCamp-WechatAPP gank.io (干货集中营) 微信小程序版本

wechat-app-music 微信小程序：音乐播放器技术栈: redux + es7 +labrador

wx-query 微信小程序仿jQuery插件