微信小程序自学

微信程序练习1：

 

1.
 "navigationBarBackgroundColor":"#C5C1AA",导航背景颜色

"navigationBarTitleText":"Welcome",导航文字内容

"navigationBarTextStyle":"white",导航字体颜色（white/black）

（此三段代码生成的效果图如下，navigation导航）

 

2.
"enablePullDownRefresh":true, 选择是否下拉刷新（选择后才能进行下拉刷新）

"backgroundColor":"#EED5B7", 下拉刷新区域的背景颜色

"backgroundTextStyle":"light", loading的样式（light/dark）
（此区域background）

此图为white样式

dark样式：

3.

 

"navigationStyle":"custom" 效果图如下，导航标题消失

    

微信小程序中的命名规则与java相似（出第一个单词外的单词开头都为大写）

 

微信小程序练习2：

 

1.调用图片所需

需要图片需要建立一个存放图片目录eg：img

然后将所需的图片找到img所在的地方放入img文件中

 

2.tabBar

tabbar面向的是对象，主体大框架为  

"tabBar":{

 

}, //微信中用“，”进行分割。若为最后一个则不需要"," 不同的类也要用“，”隔开

代码：

 

"tabBar":{

"color":"#8B8B7A", tab上的文字默认颜色

"selectedColor":"#B0B0B0", 文字被选中以后的颜色

"backgroundColor":"#FFFFFF", tab的背景色

"borderStyle":"white", tabbar上边框的颜色， 仅支持 black/white

"list":[list为tab中的一个类型为数组的对象，list的大结构为"list":[]

{ {}括起来的为list中的一个对象

"pagePath":"pages/index/index",

"text":"爱",

"iconPath":"img/3.jpg",

"selectedIconPath":"img/2.jpg"

},

{

"pagePath":"pages/logs/logs",

"text":"你",

"iconPath":"img/timg.jpg",

"selectedIconPath":"img/5.jpg"

} 注意用不用，

]

},

"debug":true

}

 

 

效果图

 

微信小程序练习3

 

1.button按钮

大体框架<button>text</button>

size有效值：default和mini

（default）

 

（mini）

type的有效值：primary（绿色），default（灰色）和warn（红色）

loading的默认值为false，如果输入loading="false"，样式为（带有loading的样式），如果输入loading="{{loading}}"或删除loading="false"（前面在data中已经将loading定义，{{  }}为对象）则不显示loading

plan的默认值为false，如果输入plain="false"，样式为（镂空，背景色为透明），如果输入plain="{{plain}}"或删除plain="false"则不透明

disable的默认值为false，如果输入disable="false"，样式为（禁用），如果输入disable="{{disable}}"或删除disable="false"则不禁用

hover-class的默认值为button-hover，如果输入hover-class="button-hover"或者不写，则有点击效果，如果输入hover-class="none"则无点击效果

2.数据绑定

bindtap绑定一个事件，事件可以在js中定义

eg：

task1:function () {

console.log("按钮被点击了") 后台中显示按钮被点击

this.setData({text1:"你选对了"}) 点击按钮后重新定义text1的文本内容

}

3.if，else标签



// pages/chart/chart.js



Page({

data: {

text1:"请点击yes or no",

Show: false //定义show为false

},

task1 :function () {

console.log("按钮被点击")

var isShow=this.data.show //定义is为this.data.show的内容

console.log("按钮被点击"+isShow) //最开始不显示原有的文本，因为show定义为false，当点击按钮后，show变为true，将text1的数据重新定义显示新定义的数据

this.setData({ text1: "嗯，你是正确的" ,show:!isShow}) //再次点击后



},

task2: function () {

console.log("按钮被点击")

var isShow = this.data.show

console.log("按钮被点击" + isShow)

this.setData({ text1: "不对，你选错了，很明显与事实不符。", show: !isShow })



}

})

 

index.wxml
<view class="container">

<view class="food" bindtap='foodpage' > //创建了一个food的按钮，定义了类的属性和id，bingtap绑定了一个事件

<button id='food'>food</button> //class和id可以通过wxss进行样式的修改

</view>



<view class="chat" bindtap='chatpage'>

<button id='chat'>chat</button>

</view>


</view>


/**index.wxss**/

.food { //class（通常用class来修改样式） 每条语句用；隔开

display: flex;

flex-direction: column;

align-items: center;

margin-bottom: 70rpx;

color:blanchedalmond;

}



#chat { //id

display: flex;

flex-direction: column;

align-items: bottom;

margin-bottom: 70rpx;

}



//index.js

Page({

data: {



},

//事件处理函数

foodpage: function() {

wx.navigateTo({ //该函数是用来转跳到内部的页面路径的

url: '../food/food' //对功能进行定义
 }) //wx.navigateTo（）微信中转跳函数 内部用{}为一个对象

},

chatpage: function () {

wx.navigateTo({

url: '../chat/chat' //url:' '为转跳的路径

})

}

})