微信小程序

微信小程序

小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部

博客maomao 发表了文章 • 0 个评论 • 1558 次浏览 • 2018-11-16 21:05 • 来自相关话题

小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部:   第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图 ...查看全部
小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部:
 
第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图
aaa.JPG

第二步:footer.wxml文件下编写代码如下:name 是template的属性,作为模板的名字。
bbb.JPG

第三步:现在我们在pages/index/index.wxml里面引用这个模板。
<import src="../templates/footer"/>
<template is="footer"></template>
ok,现在就能在各个小程序模板页面引用这个尾部了,头部一样的原理。
 
漂泊者博客原创,转载请标明出处。

小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍

博客taotao 发表了文章 • 0 个评论 • 1179 次浏览 • 2018-11-05 21:28 • 来自相关话题

小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍:   flex(flexible box)弹性盒子 一.排序 设置CSS样式为display:fl ...查看全部
小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍:
 
flex(flexible box)弹性盒子

一.排序
设置CSS样式为display:flex;才为弹性容器。如果设置了display:flex;再定义display:block属性,不起作用,弹性容器里块状属性消失。flex容器将消除item的块状特性。

flex-direction:column;(列排序)容器下的子元素垂直排序;

flex-direction:row;(行排序)容器下的子元素水平排列。

flex-direction:row-reverse;(行倒序排列,对齐方向也会颠倒,如原来靠左对齐,reverse之后,靠右对齐)

flex-direction:column-reverse;(列倒序排列,对齐方向也会颠倒,如原来靠上对齐,reverse之后,靠下对齐)

view 不指定宽高时,默认宽度100% 高度自适应。

二.flex对齐方向:

justify-content:flex-end;设置reverse时居左,居上对齐,没设置reverse时,居右,居下对齐。

justify-content:flex-start;设置reverse时居右,居下对齐,没设置reverse时,居左,居上对齐。

justify-content:center;居中显示

justify-content:space-between;平均分布显示效果

justify-content:space-around;等距分布

三.主轴,交叉轴

什么时候是主轴,什么时候是交叉轴,取决于flex-direction的值,如果值是column 垂直就是主轴,如果是row,则水平是主轴。

justify-content:center;主轴居中显示

align-items:center;交叉轴居中显示

align-items:stretch;交叉轴的拉伸,在容器不设置高度时起作用。

align-items:baseline;每个子元素的基线对齐,第一个文字的底线对齐。

四.换行

flex-wrap:nowrap;(不换行)

flex-wrap:wrap;(换行)

小程序前端模板开发教程之<五>常用wxss样式介绍

博客taotao 发表了文章 • 0 个评论 • 1124 次浏览 • 2018-11-05 20:31 • 来自相关话题

小程序前端模板开发教程之<五>常用wxss样式介绍:   1.尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做 ...查看全部
小程序前端模板开发教程之<五>常用wxss样式介绍:
 
1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下:

QQ截图20181105202811.png

2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。

例如:

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。

对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
 

QQ截图20181105202907.png


QQ截图20181105202920.png


QQ截图20181105202931.png


QQ截图20181105202943.png


QQ截图20181105202952.png


QQ截图20181105203014.png


QQ截图20181105203024.png

 
 

小程序前端模板开发教程之<四>wxml八大类基础组件

博客taotao 发表了文章 • 0 个评论 • 991 次浏览 • 2018-11-05 20:25 • 来自相关话题

小程序前端模板开发教程之<四>wxml八大类基础组件:    
小程序前端模板开发教程之<四>wxml八大类基础组件:
 
QQ截图20181105202553.png


QQ截图20181105202601.png

 

小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置

博客taotao 发表了文章 • 0 个评论 • 974 次浏览 • 2018-11-05 16:35 • 来自相关话题

小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置:   新建全局文件app.json {     "pages":[     & ...查看全部
小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置:
 
新建全局文件app.json

{
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
}

这里面的每一条,对应着一个页面,就按照这个格式写,不要写错,注意最后一条没有逗号。第一条,会显示在左边演示界面中,也就是说,想调试哪个页面,就把哪个页面的路径移到最上方。
写完之后,保存.
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#07bb45",
    "navigationBarTitleText": "漂泊者博客",
    "navigationBarTextStyle":"write",
    "navigationStyle":"default",
    "backgroundColor":"#ffffff",
    "enablePullDownRefresh":false
  }

navigationBarBackgroundColor 导航栏背景颜色

navigationBarTextStyle 导航栏标题颜色,仅支持 black / white

navigationBarTitleText 导航栏标题文字内容

navigationStyle  导航栏样式,仅支持以下值:default 默认样式  custom 自定义导航栏,只保留右上角胶囊按钮

backgroundColor 窗口的背景色

enablePullDownRefresh 是否开启当前页面的下拉刷新。默认为false

小程序前端模板开发教程之<二>小程序项目的基本结构

博客taotao 发表了文章 • 0 个评论 • 870 次浏览 • 2018-11-05 15:51 • 来自相关话题

小程序前端模板开发教程之<二>小程序项目的基本结构:   1.全局基础文件 app.json app.wxss app.js ...查看全部
小程序前端模板开发教程之<二>小程序项目的基本结构:
 
1.全局基础文件

app.json

app.wxss

app.js

project.config.json  小程序环境配置文件,有没有它都可以正常运行。

2.项目文件(pages)

index.js

index.wxml

index.wxss

index.json(可有可无)

3.utils(自定义文件夹)

utils.js

QQ截图20181105153810.png

 

小程序前端模板开发教程之<一>小程序文件类型

博客taotao 发表了文章 • 0 个评论 • 892 次浏览 • 2018-11-05 15:04 • 来自相关话题

小程序前端模板开发教程之<一>小程序文件类型:   1.样式:.wxss文件 2.骨架:.wxml文件 3.业务:.js文件 4.配置 .json ...查看全部
小程序前端模板开发教程之<一>小程序文件类型:
 
1.样式:.wxss文件

2.骨架:.wxml文件

3.业务:.js文件

4.配置 .json文件 

注意事项:json文件不能注释,最后一个不要有逗号,json文件的键和值只能用双引号,不能用单引号。

QQ截图20181105150421.png

 

小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部

博客maomao 发表了文章 • 0 个评论 • 1558 次浏览 • 2018-11-16 21:05 • 来自相关话题

小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部:   第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图 ...查看全部
小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部:
 
第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图
aaa.JPG

第二步:footer.wxml文件下编写代码如下:name 是template的属性,作为模板的名字。
bbb.JPG

第三步:现在我们在pages/index/index.wxml里面引用这个模板。
<import src="../templates/footer"/>
<template is="footer"></template>
ok,现在就能在各个小程序模板页面引用这个尾部了,头部一样的原理。
 
漂泊者博客原创,转载请标明出处。

小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍

博客taotao 发表了文章 • 0 个评论 • 1179 次浏览 • 2018-11-05 21:28 • 来自相关话题

小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍:   flex(flexible box)弹性盒子 一.排序 设置CSS样式为display:fl ...查看全部
小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍:
 
flex(flexible box)弹性盒子

一.排序
设置CSS样式为display:flex;才为弹性容器。如果设置了display:flex;再定义display:block属性,不起作用,弹性容器里块状属性消失。flex容器将消除item的块状特性。

flex-direction:column;(列排序)容器下的子元素垂直排序;

flex-direction:row;(行排序)容器下的子元素水平排列。

flex-direction:row-reverse;(行倒序排列,对齐方向也会颠倒,如原来靠左对齐,reverse之后,靠右对齐)

flex-direction:column-reverse;(列倒序排列,对齐方向也会颠倒,如原来靠上对齐,reverse之后,靠下对齐)

view 不指定宽高时,默认宽度100% 高度自适应。

二.flex对齐方向:

justify-content:flex-end;设置reverse时居左,居上对齐,没设置reverse时,居右,居下对齐。

justify-content:flex-start;设置reverse时居右,居下对齐,没设置reverse时,居左,居上对齐。

justify-content:center;居中显示

justify-content:space-between;平均分布显示效果

justify-content:space-around;等距分布

三.主轴,交叉轴

什么时候是主轴,什么时候是交叉轴,取决于flex-direction的值,如果值是column 垂直就是主轴,如果是row,则水平是主轴。

justify-content:center;主轴居中显示

align-items:center;交叉轴居中显示

align-items:stretch;交叉轴的拉伸,在容器不设置高度时起作用。

align-items:baseline;每个子元素的基线对齐,第一个文字的底线对齐。

四.换行

flex-wrap:nowrap;(不换行)

flex-wrap:wrap;(换行)

小程序前端模板开发教程之<五>常用wxss样式介绍

博客taotao 发表了文章 • 0 个评论 • 1124 次浏览 • 2018-11-05 20:31 • 来自相关话题

小程序前端模板开发教程之<五>常用wxss样式介绍:   1.尺寸单位 rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做 ...查看全部
小程序前端模板开发教程之<五>常用wxss样式介绍:
 
1.尺寸单位

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下:

QQ截图20181105202811.png

2.样式导入

可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。

例如:

/** other.wxss **/

.appText{

  margin:10px;

}

/** app.wxss **/

@import "other.wxss";

.content_text:{

  margin:15px;

}

app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。

对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
 

QQ截图20181105202907.png


QQ截图20181105202920.png


QQ截图20181105202931.png


QQ截图20181105202943.png


QQ截图20181105202952.png


QQ截图20181105203014.png


QQ截图20181105203024.png

 
 

小程序前端模板开发教程之<四>wxml八大类基础组件

博客taotao 发表了文章 • 0 个评论 • 991 次浏览 • 2018-11-05 20:25 • 来自相关话题

小程序前端模板开发教程之<四>wxml八大类基础组件:    
小程序前端模板开发教程之<四>wxml八大类基础组件:
 
QQ截图20181105202553.png


QQ截图20181105202601.png

 

小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置

博客taotao 发表了文章 • 0 个评论 • 974 次浏览 • 2018-11-05 16:35 • 来自相关话题

小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置:   新建全局文件app.json {     "pages":[     & ...查看全部
小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置:
 
新建全局文件app.json

{
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
}

这里面的每一条,对应着一个页面,就按照这个格式写,不要写错,注意最后一条没有逗号。第一条,会显示在左边演示界面中,也就是说,想调试哪个页面,就把哪个页面的路径移到最上方。
写完之后,保存.
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#07bb45",
    "navigationBarTitleText": "漂泊者博客",
    "navigationBarTextStyle":"write",
    "navigationStyle":"default",
    "backgroundColor":"#ffffff",
    "enablePullDownRefresh":false
  }

navigationBarBackgroundColor 导航栏背景颜色

navigationBarTextStyle 导航栏标题颜色,仅支持 black / white

navigationBarTitleText 导航栏标题文字内容

navigationStyle  导航栏样式,仅支持以下值:default 默认样式  custom 自定义导航栏,只保留右上角胶囊按钮

backgroundColor 窗口的背景色

enablePullDownRefresh 是否开启当前页面的下拉刷新。默认为false

小程序前端模板开发教程之<二>小程序项目的基本结构

博客taotao 发表了文章 • 0 个评论 • 870 次浏览 • 2018-11-05 15:51 • 来自相关话题

小程序前端模板开发教程之<二>小程序项目的基本结构:   1.全局基础文件 app.json app.wxss app.js ...查看全部
小程序前端模板开发教程之<二>小程序项目的基本结构:
 
1.全局基础文件

app.json

app.wxss

app.js

project.config.json  小程序环境配置文件,有没有它都可以正常运行。

2.项目文件(pages)

index.js

index.wxml

index.wxss

index.json(可有可无)

3.utils(自定义文件夹)

utils.js

QQ截图20181105153810.png

 

小程序前端模板开发教程之<一>小程序文件类型

博客taotao 发表了文章 • 0 个评论 • 892 次浏览 • 2018-11-05 15:04 • 来自相关话题

小程序前端模板开发教程之<一>小程序文件类型:   1.样式:.wxss文件 2.骨架:.wxml文件 3.业务:.js文件 4.配置 .json ...查看全部
小程序前端模板开发教程之<一>小程序文件类型:
 
1.样式:.wxss文件

2.骨架:.wxml文件

3.业务:.js文件

4.配置 .json文件 

注意事项:json文件不能注释,最后一个不要有逗号,json文件的键和值只能用双引号,不能用单引号。

QQ截图20181105150421.png