小程序教程

小程序教程

微信小程序之 var和let区别

博客maomao 发表了文章 • 0 个评论 • 1110 次浏览 • 2019-01-06 11:58 • 来自相关话题

微信小程序之 var和let区别:   一.用var的方式声明的变量,为全局变量,其作用域为所在的函数内。所以重点来了,在当前JS文件的其余函数中,如果直接拿来用,也会报变量未定义的错误。详情请看下面的var的错误使用方式。 ...查看全部
微信小程序之 var和let区别:
 
一.用var的方式声明的变量,为全局变量,其作用域为所在的函数内。所以重点来了,在当前JS文件的其余函数中,如果直接拿来用,也会报变量未定义的错误。详情请看下面的var的错误使用方式。
 
案例如下:
 
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})

},
onLoad() {
console.log('App onLoad');
// 用var的方式声明的i在onLoad函数内都有效,在其余函数中是没有效果的哦。
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
},
})
var的错误使用方式
在index.js文件的addPerson:函数中,打印在onLoad函数中声明的var变量i,就会报报变量i未定义的错误。
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
console.log('addPerson函数中i的值'+i);
},
onLoad() {
console.log('App onLoad');
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
},
})
当然,如果你想 用var声明的i在addPerson类中也可以使用的话,那么你可以用this.data.i = i;将i存储在index.js整个文件中
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
console.log('addPerson函数中i的值'+this.data.i);
},
onLoad() {
console.log('App onLoad');
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
this.data.i = i;
},
})

二.用let的方式声明的变量,为局部变量,该变量只会在最靠近{ }内的范围有效,出了{}之后,该变量就不能够再用了,否则会报该变量未定义的错误。也就是说,该变量的作用域为所在的代码块内。
//index.js
//获取应用实例
const app = getApp()

Page({
data: {
},

onLoad: function () {
console.log('App onLoad');

// 用let的方式声明的i只在for循环内有效,在for循环外引用就会报错i未定义的错误
for (let i = 0; i < 10; i++) {
console.log('for循环里面的i的值为'+i);
}
console.log(i);
},
})

 
原文链接:https://www.jianshu.com/p/e62d4ee72a61

微信小程序module.exports模块化操作实例项目操作

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

微信小程序module.exports模块化操作实例项目操作:     一。定义公共JS,common.js   var studentList = [ { nam ...查看全部
微信小程序module.exports模块化操作实例项目操作:
 
 
一。定义公共JS,common.js
 
var studentList = [
{
name: "xiaoming",
age: "22",
hobby: "sleep"
},
{
name: "xiaohong",
age: "22",
hobby: {
one: "eat",
two: "eatfood"
}
}
]
//模块化
module.exports = {
studentList: studentList
}
2.应用层JS
 
var common = require("../aa/common.js")
//获取应用实例
var app = getApp()
Page({
data: {
},
onLoad: function () {
this.setData({
studentList:common.studentList
});
}
})
3.应用模板中调用,index.wxml
 
<block wx:for="{{studentList}}" wx:for-item="item" wx:for-index="idx">
<view>
{{item.name}}
</view>
</block>
最后输出的是xiaoming 和xiaohong
 

小程序-调用 app.js公共js对象方法及公共变量

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

小程序-调用 app.js公共js对象方法及公共变量:   1.公共js定义的方法: //app.js小程序公共入口文件 App({ // 自定义方法 productshead:f ...查看全部
小程序-调用 app.js公共js对象方法及公共变量:
 
1.公共js定义的方法
//app.js小程序公共入口文件
App({
// 自定义方法
productshead:function(){
return "公共js调用方法headertxt"}

})
2.子页面js:
//调用公共js对象以便调用其方法
var app = getApp();//获取应用实例
// console.log(app)//可查看公共js(app.js)的方法
Page({
data: {
"headtxt":app.productshead()//调用公共appjs的方法
}
})

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

博客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

 

微信小程序之 var和let区别

博客maomao 发表了文章 • 0 个评论 • 1110 次浏览 • 2019-01-06 11:58 • 来自相关话题

微信小程序之 var和let区别:   一.用var的方式声明的变量,为全局变量,其作用域为所在的函数内。所以重点来了,在当前JS文件的其余函数中,如果直接拿来用,也会报变量未定义的错误。详情请看下面的var的错误使用方式。 ...查看全部
微信小程序之 var和let区别:
 
一.用var的方式声明的变量,为全局变量,其作用域为所在的函数内。所以重点来了,在当前JS文件的其余函数中,如果直接拿来用,也会报变量未定义的错误。详情请看下面的var的错误使用方式。
 
案例如下:
 
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})

},
onLoad() {
console.log('App onLoad');
// 用var的方式声明的i在onLoad函数内都有效,在其余函数中是没有效果的哦。
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
},
})
var的错误使用方式
在index.js文件的addPerson:函数中,打印在onLoad函数中声明的var变量i,就会报报变量i未定义的错误。
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
console.log('addPerson函数中i的值'+i);
},
onLoad() {
console.log('App onLoad');
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
},
})
当然,如果你想 用var声明的i在addPerson类中也可以使用的话,那么你可以用this.data.i = i;将i存储在index.js整个文件中
Page({
data: {
name: '新增参保人',// name的默认值
},
addPerson: function (event) {
// this.data.name = '保存'
this.setData({
name: '保存'
})
console.log('addPerson函数中i的值'+this.data.i);
},
onLoad() {
console.log('App onLoad');
for (var i = 0; i < 10; i++) {
console.log('for循环里面的i的值为' + i);
}
console.log('onLoad函数中i的值' + i);
this.data.i = i;
},
})

二.用let的方式声明的变量,为局部变量,该变量只会在最靠近{ }内的范围有效,出了{}之后,该变量就不能够再用了,否则会报该变量未定义的错误。也就是说,该变量的作用域为所在的代码块内。
//index.js
//获取应用实例
const app = getApp()

Page({
data: {
},

onLoad: function () {
console.log('App onLoad');

// 用let的方式声明的i只在for循环内有效,在for循环外引用就会报错i未定义的错误
for (let i = 0; i < 10; i++) {
console.log('for循环里面的i的值为'+i);
}
console.log(i);
},
})

 
原文链接:https://www.jianshu.com/p/e62d4ee72a61

微信小程序module.exports模块化操作实例项目操作

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

微信小程序module.exports模块化操作实例项目操作:     一。定义公共JS,common.js   var studentList = [ { nam ...查看全部
微信小程序module.exports模块化操作实例项目操作:
 
 
一。定义公共JS,common.js
 
var studentList = [
{
name: "xiaoming",
age: "22",
hobby: "sleep"
},
{
name: "xiaohong",
age: "22",
hobby: {
one: "eat",
two: "eatfood"
}
}
]
//模块化
module.exports = {
studentList: studentList
}
2.应用层JS
 
var common = require("../aa/common.js")
//获取应用实例
var app = getApp()
Page({
data: {
},
onLoad: function () {
this.setData({
studentList:common.studentList
});
}
})
3.应用模板中调用,index.wxml
 
<block wx:for="{{studentList}}" wx:for-item="item" wx:for-index="idx">
<view>
{{item.name}}
</view>
</block>
最后输出的是xiaoming 和xiaohong
 

小程序-调用 app.js公共js对象方法及公共变量

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

小程序-调用 app.js公共js对象方法及公共变量:   1.公共js定义的方法: //app.js小程序公共入口文件 App({ // 自定义方法 productshead:f ...查看全部
小程序-调用 app.js公共js对象方法及公共变量:
 
1.公共js定义的方法
//app.js小程序公共入口文件
App({
// 自定义方法
productshead:function(){
return "公共js调用方法headertxt"}

})
2.子页面js:
//调用公共js对象以便调用其方法
var app = getApp();//获取应用实例
// console.log(app)//可查看公共js(app.js)的方法
Page({
data: {
"headtxt":app.productshead()//调用公共appjs的方法
}
})

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

博客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