toast 和android的toast一样，这里默认1500ms自动消失，也可以调用hiden消失
默认的icon是success也就是一个对号，设置为none就只显示文字了。wx.showToast({ title: 'login success',
icon:'none'
duration:1000
})
loading 显示一个loading，需要手动调用hidden消失wx.showLoading({ title: '加载中',
})
setTimeout(function(){
wx.hideLoading()
},2000)
modal确认对话款wx.showModal({ title: 'title', content: 'content', success: res => { if (res.confirm) {
wx.showToast({ title: 'click ok',
})
}else if(res.cancel){
wx.showToast({ title: 'click cancel',
})
}
}
})
image.png
actionsheet 列表选择器
代码,如果列表数据要动态的，那这里引用一个变量即可，你去修改变量这里自然也就变了。wx.showActionSheet({ itemList: ['老大', '老二', '老三'], itemColor:"blue", success:function(res){
wx.showToast({ title: ''+res.tapIndex, icon:'none'
})
}, fail:function(res){
wx.showToast({ title: 'cancel', icon:'loading'
})
}
})
效果图如下
image.png
大致瞅下demo的代码
首先看下目录结构
image.png
从android开发者的角度来分析
每一个js文件就相当于一个activity，当然了不太准，里边需要一个Page的东西的。
每一个js如果是一个页面的话，那么就需要注册才能用，android是在manifest.xml里注册，那么小程序是在哪里？
在app.json里，如下图,pages标签下的都是。另外window属性应该是设置的页面默认的属性，当然了是设置标题的主要{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/learn/learn"
], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "icanseno", "navigationBarTextStyle":"black"
}
}
app.js 看起来很像我们的application。
.wxml 文件，感觉就像我们android里的布局文件
.wxss文件，很像是样式文件，对控件的属性进行设置。比如设置宽高，位置，边距等等
.json文件，很像我们manifest下每个activity下的配置文件，比如 label，theme那些。
页面跳转
url 后边跟着跳转页面的路径，2个点自然是上一级了wx.navigateTo({ url: '../learn/learn',
})
设置点击事件
bindtap 就是设置点击事件的，后边起个名字。class就是一个样式的名字，样式在wxss里写login
//设置登陆点击事件
bindLoginTap:function(){
//随便干点啥
}
仿照已有的两个页面写一个简单页面
image.png
learn.wxml文件如下,弄了2个输入框，一个按钮login
learn.wxss文件如下
还没学规则，就仿着写，看他用的点加class名字，我也这样写。
不过这里碰到问题了，不知道距离这种单位咋区分的，我看demo里是rpx，可px又啥啥，.login-edit{
display: flex;
flex-direction:column;
margin: 40rpx;
}
.input-phone{
background: red;
height: 50rpx;
}
.input-password{
background: blue;
height: 60rpx;
margin-top: 20px;//这里20px看上去和60rpx差不多，不知道单位咋算的，先放着}
.button-login{
margin-top: 50px;
padding-left: 100px;
padding-right: 100px;
}
本来计划
先学这个
{{ }} 这样的表达式
这个和占位符差不多，里边有个变量，这个变量改变以后这里对应的值也就发生变化了，如果学过databinding的话估计好理解一些。
如下//wxml文件里有如下的文本{{logintip}}//js里，初始化的时候赋值为login
/**
* 页面的初始数据
*/
data: {
logintip:'login'
},//比如点击登录按钮我们改变这个字段，可以看到我们修改了logintip的值以后，文本显示的内容自动就修改了
//处理登陆点击事件bindLoginTap:function(){
this.setData({
logintip:'点击登录了'})
},
this的使用
上边的this没啥问题，可以找到setData方法，可如果我们再套一层，如下onPullDownRefresh: function () { this.setData({ logintip: '登录'
})
setTimeout(function(){
//在这里用this.setData就不行了，这个this已经不是我们要的那个this拉
},2222)
},
有两种方法，
第一种，用个临时变量保存下这个thisonPullDownRefresh: function () { var temp=this;//赋值给一个临时变量
setTimeout(function(){
temp.setData({ logintip: '登录'
})
wx.stopPullDownRefresh()
},2222)
},
第二种,就像lamda表达式吧onPullDownRefresh: function(){ //这里修改下，function(参数)改成参数=》这种，因为没有参数，所以用any代替
setTimeout(any=>{ this.setData({ logintip: '登录'
})
wx.stopPullDownRefresh()
},2222)
},
页面下json数据的设置
好像不支持双斜杠注释，编译的时候会一直提示挂了。。{ "navigationBarTitleText": "第一个练习界面",//导航栏标题文字内容
"navigationBarBackgroundColor": "#ff0000",//导航栏标题颜色，仅支持 black/white
"navigationBarTextStyle": "white",//导航栏背景颜色
"enablePullDownRefresh": true,//是否开启下拉刷新
"backgroundColor": "#ffffff",//窗口的背景色
"backgroundTextStyle": "dark",//下拉 loading 的样式，仅支持 dark/light
"onReachBottomDistance":20,//页面上拉触底事件触发时距页面底部距离，单位为px
"disableScroll":true //设置为 true 则页面整体不能上下滚动；只在 page.json 中有效}//最后两个属性没有提示，比较坑，还得手动写。 另外上边是目前所有的页面的配置属性了，单独页面只能配置window属性用来覆盖app.json下的window属性
app.json的
完整的如下,tabbar不是必须的，还有坑。{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/learn/learn", "pages/justtest/test"
], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "icanseno", "navigationBarTextStyle":"black"
}, "networkTimeout": { "request": 20000, "connectSocket": 20000, "uploadFile": 20000, "downloadFile": 20000
}, "debug": true,"tabBar": {"color": "#000000", "selectedColor":"#ff0000", "backgroundColor":"#ffffff", "borderStyle":"black", "position":"bottom", "list": [
{ "pagePath": "pages/index/index", "text": "test", "iconPath": "res/all.png", "selectedIconPath": "res/all_select.png"
},
{ "pagePath": "pages/learn/learn", "text": "first", "iconPath": "res/set.png", "selectedIconPath": "res/set_select.png"
}
]
}
}
image.png
我看这里有个tabbar，我也加上了，完事发现这东西也不显示啊。而且咋显示啊，然后就想到了，小程序的第一个页面是在哪里设置的？
就是pages列表下的第一个，谁放到第一个谁就是启动页。
那么问题来了tabbar咋办？tabbar要显示成启动页，那么它的list下的第一个pagepath就必须和pages列表下的第一个一样。
而且发现，tabbar里的这些页面，无法在通过其他地方进入了。比如上边的，我把learn也放到了tabbar，
其他地方我有个按钮点击也跳到learn页面，如下，结果没反应，刚学，也不知道对不对，先这样吧
wx.navigateTo({
url: '../learn/learn',
})
image 以及循环添加控件
默认数组的当前项的下标变量名为 index，数组当前项的变量名默认为 item
如果想改名字，可以这样写wx:for-item="itemData" wx:for-index="i"
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
等待加载数据..
{{itemData.index}}
{{itemData.name}}
学习下wx:if wx:else 的用法
{{}}占位符，在标签里边一般得加个双引号的。
wx:for= 后边跟个数组，wx:for-item= 后边给循环的数据起个别名，后边用到
{{itemData.index}}就是根据上边的item的名字来获取数据的
我们在js的data数据里添加如下的数组array:[{
index:0,
name:'大哥'
},
{
index: 1,
name: '二哥'
},
{
index: 2,
name: '三哥'
}
]
wx: 这玩意也不提示，用起来不爽
checkbox
默认是选中状态，"{{false}}" 这种有效，直接弄个单引号false是无效的。{{"checkbox"+number}}
代码里动态修改ck的值，可以改变button的type。
动态改变数组里的数据data: { array:[{
index:0,
name:'大哥',
check:false
},
{ index: 1,
name: '二哥',
check: false
}
]
}
点击按钮修改
双引号括起来代表变量，0是数组索引，这里修改的是第一个。btnclick0: function (res) { this.setData({ "array[0].check" : true
})
}
第二种写法,用一个变量保存，不过使用的时候变量要加个中括号代表是变量btnclick0: function (res) { var hello = "array[0].check"
this.setData({
[hello]:true
})
}
数组列表设置点击事件
注意data-any (any任意类型) 方法，我们这里注入了一个id等于数据的index索引。
下边弄了2个 data-id 和 data-check
{{item.index}} {{index}}
{{item.name}}
把点击事件写到外层也是可以的，如下
{{item.index}} {{index}}
{{item.name}}
js里这样写//res.currentTarget.dataset保存所有的data-的数据
itemclick:function(res){ var id=res.currentTarget.dataset.id var ck = res.currentTarget.dataset.check
var temp = "array[" + id + "].check"
// var state=this.data.array[id].check
// console.log("change============="+!state)
this.setData({
[temp]:!ck
})
}
单选设置
原理就是在js里定义一个clickindex的变量保存当前选中的item的index，完事代码如下
我这里比较简单，就修改type， 按钮默认就是灰色的，warn是红色的，注意 ‘warn’单引号，其他效果的话逻辑是一样的。
{{item.name}}
js代码data: { clickindex:0,
//省略其他 ，点击按钮以后修改clickindex为点击的按钮的index即可。
singleclick:function(res){
var id=res.currentTarget.dataset.id
this.setData({
clickindex:id
})
}
作者：有点健忘
链接：https://www.jianshu.com/p/977887c80668
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
