
小程序教程
微信小程序之 var和let区别
博客 • maomao 发表了文章 • 0 个评论 • 1262 次浏览 • 2019-01-06 11:58
一.用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);
},
})

在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);
},
})

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 个评论 • 1397 次浏览 • 2018-12-28 21:39
一。定义公共JS,common.js
var studentList = [2.应用层JS
{
name: "xiaoming",
age: "22",
hobby: "sleep"
},
{
name: "xiaohong",
age: "22",
hobby: {
one: "eat",
two: "eatfood"
}
}
]
//模块化
module.exports = {
studentList: studentList
}
var common = require("../aa/common.js")3.应用模板中调用,index.wxml
//获取应用实例
var app = getApp()
Page({
data: {
},
onLoad: function () {
this.setData({
studentList:common.studentList
});
}
})
<block wx:for="{{studentList}}" wx:for-item="item" wx:for-index="idx">最后输出的是xiaoming 和xiaohong
<view>
{{item.name}}
</view>
</block>
小程序-调用 app.js公共js对象方法及公共变量
博客 • taotao 发表了文章 • 0 个评论 • 1256 次浏览 • 2018-12-28 21:34
1.公共js定义的方法:
//app.js小程序公共入口文件2.子页面js:
App({
// 自定义方法
productshead:function(){
return "公共js调用方法headertxt"}
})
//调用公共js对象以便调用其方法
var app = getApp();//获取应用实例
// console.log(app)//可查看公共js(app.js)的方法
Page({
data: {
"headtxt":app.productshead()//调用公共appjs的方法
}
})
小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部
博客 • maomao 发表了文章 • 0 个评论 • 1887 次浏览 • 2018-11-16 21:05
第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图
第二步:footer.wxml文件下编写代码如下:name 是template的属性,作为模板的名字。
第三步:现在我们在pages/index/index.wxml里面引用这个模板。
<import src="../templates/footer"/>ok,现在就能在各个小程序模板页面引用这个尾部了,头部一样的原理。
<template is="footer"></template>
漂泊者博客原创,转载请标明出处。
小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍
博客 • taotao 发表了文章 • 0 个评论 • 1325 次浏览 • 2018-11-05 21:28
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 个评论 • 1327 次浏览 • 2018-11-05 20:31
1.尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:
2.样式导入
可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。
例如:
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
小程序前端模板开发教程之<四>wxml八大类基础组件
博客 • taotao 发表了文章 • 0 个评论 • 1166 次浏览 • 2018-11-05 20:25
小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置
博客 • taotao 发表了文章 • 0 个评论 • 1154 次浏览 • 2018-11-05 16:35
新建全局文件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 个评论 • 1008 次浏览 • 2018-11-05 15:51
微信小程序之 var和let区别
博客 • maomao 发表了文章 • 0 个评论 • 1262 次浏览 • 2019-01-06 11:58
一.用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);
},
})

在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);
},
})

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 个评论 • 1397 次浏览 • 2018-12-28 21:39
一。定义公共JS,common.js
var studentList = [2.应用层JS
{
name: "xiaoming",
age: "22",
hobby: "sleep"
},
{
name: "xiaohong",
age: "22",
hobby: {
one: "eat",
two: "eatfood"
}
}
]
//模块化
module.exports = {
studentList: studentList
}
var common = require("../aa/common.js")3.应用模板中调用,index.wxml
//获取应用实例
var app = getApp()
Page({
data: {
},
onLoad: function () {
this.setData({
studentList:common.studentList
});
}
})
<block wx:for="{{studentList}}" wx:for-item="item" wx:for-index="idx">最后输出的是xiaoming 和xiaohong
<view>
{{item.name}}
</view>
</block>
小程序-调用 app.js公共js对象方法及公共变量
博客 • taotao 发表了文章 • 0 个评论 • 1256 次浏览 • 2018-12-28 21:34
1.公共js定义的方法:
//app.js小程序公共入口文件2.子页面js:
App({
// 自定义方法
productshead:function(){
return "公共js调用方法headertxt"}
})
//调用公共js对象以便调用其方法
var app = getApp();//获取应用实例
// console.log(app)//可查看公共js(app.js)的方法
Page({
data: {
"headtxt":app.productshead()//调用公共appjs的方法
}
})
小程序前端模板开发教程之<七>微信小程序页面引入公共头部和尾部
博客 • maomao 发表了文章 • 0 个评论 • 1887 次浏览 • 2018-11-16 21:05
第一步:在pages目录下面新建一个templates目录,新建footer文件,如下图
第二步:footer.wxml文件下编写代码如下:name 是template的属性,作为模板的名字。
第三步:现在我们在pages/index/index.wxml里面引用这个模板。
<import src="../templates/footer"/>ok,现在就能在各个小程序模板页面引用这个尾部了,头部一样的原理。
<template is="footer"></template>
漂泊者博客原创,转载请标明出处。
小程序前端模板开发教程之<六>flex(flexible box)弹性盒子常用功能介绍
博客 • taotao 发表了文章 • 0 个评论 • 1325 次浏览 • 2018-11-05 21:28
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 个评论 • 1327 次浏览 • 2018-11-05 20:31
1.尺寸单位
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下:
2.样式导入
可以使用@import语句来导入外联样式表,其后面跟需要导入外联样式表的相对路径,并以分号结束。
例如:
/** other.wxss **/
.appText{
margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
margin:15px;
}
app.wxss是全局样式,作用于每一个页面,而page下的每一个的wxss文件只作用于当前页面,并对全局样式中的相同属性会覆盖。
对于微信小程序wxss样式的使用来说,其实大部分都和css样式一致,下面简单的进行介绍一下:
小程序前端模板开发教程之<四>wxml八大类基础组件
博客 • taotao 发表了文章 • 0 个评论 • 1166 次浏览 • 2018-11-05 20:25
小程序前端模板开发教程之<三>小程序项目的新建从零开始app.json配置
博客 • taotao 发表了文章 • 0 个评论 • 1154 次浏览 • 2018-11-05 16:35
新建全局文件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 个评论 • 1008 次浏览 • 2018-11-05 15:51