知识点重要程度分为五级:*、**、***、****、*****
text文本 *****
关键词:text、selectable
语法及代码:
【wxml】
<text selected=’true’ class=’sayhi’>大家好,我是name</text>
【wxss】
.sayhi{
color:red;
font-size:30rpx;
}
【js】
page{{
data:{
name:’啦啦啦’
}}
5.prograss进度条 ****
关键词:prograss、percent、show-info、stroke-width、active、backgroundcolor、activeColor
语法及代码:
【wxml】
<prograss percent=’80’ show-info stroke-width=’6’ ></prograss>
<prograss percent=’{{ percent }}’ show-info stroke-width=’26’
backgroundcolor=’gray’ activeColor=’green’ active></prograss>
【js】
page{{
data:{
name:’武振华’,
percent:’65’
}}
6.button 按钮 *****
关键词:button、size、default、mini、type、primary、warn、disabled、plain
语法及代码:
【wxml】
<button size=’default’ >点击我</button>
<button size=’mini’>点击我</button>
<button size=’default’ type=’primary’>点击我</button>
<button size=’default’ type=’warn’>点击我</button>
<button size=’default’ type=’warn’ plain=’true’>点击我</button>
<button size=’default’ type=’warn’ disabled=’true’>点击我</button>
<button bindtap=’SayHi’ >点击我</button>
【js】
Page{
data:{
},
SayHi:function(){
console.log(‘ Hi ’)
},
7.checkbox 多选按钮 ***
关键词:checkbox、checkbox-group、disabled、checked、color、console、detail、function、ev(event事件)、log、value
语法及代码:
【wxml】
<checkbox-group bindtap=’change’>
<checkbox value=’1’ disabled=’true’> 1 </checkbox>
<checkbox value=’2’ checked=’true’> 2 </checkbox>
<checkbox value=’3’ color=’red’> 3 </checkbox>
</checkbox-group>
【js】
Page{
data:{
},
change:function(ev){
console.log(‘ ev.detail.value ’)
},
8.checkbox 多选按钮 ***
关键词:checkbox、checkbox-group、disabled、checked、color、console、detail、function、ev(event事件)、log、value
语法及代码:
【wxml】
<checkbox-group bindtap=’change’>
<checkbox value=’1’ disabled=’true’> 1 </checkbox>
<checkbox value=’2’ checked=’true’> 2 </checkbox>
<checkbox value=’3’ color=’red’> 3 </checkbox>
</checkbox-group>
【js】
Page{
data:{
},
change:function(ev){
console.log(‘ ev.detail.value ’)
},
9.input 输入框 ***
关键词:input、value、placehoder、password、disabled、
语法及代码:
【wxml】
<input value=’你是谁’></input>
<input placehoder=’你的名字’></input>
<input password=’true’></input>
<input placehoder=’禁止输入’ disabled></input>
10. radio 单选按钮 **
关键词:radio、radio-group、bindchange、radio-group、value、color、disabled、checked、switch
语法及代码:
【wxml】
<switch color=’red’ checked=’true’ bindchange=’change’>开关</switch>
<radio-group bindchanges=’change’>
<radio value=’1’> 1 </radio>
<radio value=’2’> 2 </radio>
<radio value=’3’ color=’red’ checked=’true’> 3 </radio>
<radio value=’4’ disabled> 4 </radio>
</radio-group>
【js】
Page{
data:{
},
change:function(ev){
console.log(‘ ev.detail.value ’)
},
11. 表单提交 ****
关键词:form、bindsubmit、input、name、placehoder、checkbox-group、value、button、form-type、submit、
语法及代码:
【wxml】
<form bindsubmit=’change’>
<input name=’username’ placehoder=’你的名字’></input>
<checkbox-group name=’number’>
<checkbox value=’1’>1</checkbox>
<checkbox value=’2’>2</checkbox>
<checkbox value=’3’>3</checkbox>
<checkbox value=’4’>4</checkbox>
</checkbox-group>
<radio-group name=’letter’>
<radio value=’a’> a </radio>
<radio value=’a’> b </radio>
<radio value=’c’> c </radio>
<radio value=’d’> d </radio>
</radio-group>
<button form-type=’submit’>提交</button>
</form>
【js】
Page{
data:{
},
change:function(ev){
console.log(‘ ev.detail.value ’)
},
12. Navigator 跳转 *****
关键词:Navigator、button
语法及代码:
【wxml】
<navigator url=’../logs/logs’>
<button>跳转</button>
</navigator>
13. Wx.request 数据请求 *****
关键词:wx.request、url、success、fail、complete、method、header、dataType
语法及代码:
【js】
onload:function(option){
Wx.request{{
url:’http://www.baidu.com’, <!----微信小程序中的域名必须是合法的域名---!>
success:funciton(rsp){
Console.log(rsp)
},
fail:funciton(rsp){
console.log(rsp)
},
complete:function(rsp){
console.log(‘完成’)
},
method:’GET’,
header:{
‘ ’ : ’ ‘
},
Datatype:’json’
}}
},