微信小程序之入门(2)

知识点重要程度分为五级：*、**、***、****、*****

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’

}}

},