微信小程序学习笔记一

最新推荐文章于 2024-06-28 14:19:20 发布

阿桂有点桂

最新推荐文章于 2024-06-28 14:19:20 发布

阅读量363

点赞数

分类专栏：微信小程序文章标签：微信小程序笔记小程序微信

本文链接：https://blog.csdn.net/u010112509/article/details/82983427

版权

微信小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

要想显示对应的小程序页面，一定要在app.json中的pages里面写入路径。

在小程序view里面输出值使用标签{{ }}输出

单位换算：1px=2rpx;（以iphone6为视觉稿，iphone6设计稿为750X1334）

1、for循环

<view wx:for="{{array}}"></view>或者<block wx:for="{{array}}"></block>。默认key为index，value为item。自定义key名字wx:for-index="k"，自定义value名字wx:for-item="v"。

例：

{{k}}: {{v.message}}//输出二维数字

</view>

注：wx:for里面可以嵌套wx:for

{{i}} * {{j}} = {{i * j}}

</view>

2、if判断

1）、类似if ($a){} 判断

2）、类似 if($a){}else{}判断

<view wx:else>false</view>或<view wx:else=’ array[0]==1’>false</view>

3）、类似if($a==1){}else if($a==2){}判断

3、使用模板（优势和具体情景未理解）

可以在模板中定义代码片段，然后在不同的地方调用。感觉有点象smarty视图中的<{assign}>。还可以让其他页面引用对应的模板。

<view>

<text> {{index}}: {{msg}} </text>

</view>

</template>

4、事件

以bind或catch开头，然后跟上事件的类型：bindtap。bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

1）、bindtap点击事件类似js的click。

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

Js：

Page({

tapName: function(event) {

console.log(event)

}

})

2）、获取前端的值

target触发事件的源组件。currentTarget事件绑定的当前组件。

① 、currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。获得点击事件所在标签的参数值（获得data-apl值）。

clickLog: function (event){

var a=event.currentTarget.dataset.apl;

console.log(a);

②、target指的是该对象里的子对象。获得点击事件下的参数值（即data-awa的值）

</view>

clickLog: function (e){

var a=e. target.dataset.awaa;

console.log(a);

3）、获取前端其他标签的值，非点击标签

5、引用

1）、import

在当前页面引用对应页面的模板内容。对应模板赋值的值在当前页面赋值。import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：

</template>

在 index.wxml 中引用了 item.wxml，就可以使用item模板：

2）、include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如：

<view> header </view>

<view> footer </view>

6、总的app.json

1）、pages

新建的每个wxml页面都要在pages里面引用。

{

"pages":[

"pages/weather/weather",

"pages/about/about",

"pages/city/city"

}

7、JS各个属性的使用

1）、在其他函数，修改data中的text值。实际输出结果为“Set some data for updating view.”

setData函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

Page({

data: {

text: "This is page data."

ceshi:function(){

          this.setData({

           text: 'Set some data for updating view.'

}

})

2）、修改wxml文件中的css

对应的css样式在page-data中先定义个变量，在对应地方把要改的css样式传给变量，在wxml页面中在输出变量

例：修改class为search不显示

</view>

Page({

data: {

imgurl:"/images/index",

searchChange1:"",

searchChange2: "display:none"

seachClick:function(e){

var num = e.currentTarget.dataset.num;

if(num==1){

this.setData({

searchChange1: "display:none",

searchChange2: ""

});

}else{

this.setData({

searchChange1: "",

searchChange2: "display:none"

});

}

})

3）、获取input的值

①、bindinput

input输入的时候触发，值获取：e.detail.value。这个类似于input的keyup或者keydown事件处理方式。这个可以作为js直接获取input单个值。

例：

<view>

</view>

unamIn:function(e){

var uname = e.detail.value;

console.log(uname);

}

②、bindblur

input 输入焦点时触发。值获取：e.detail.value。注意，这个值只有失去焦点的时候才会被触发，失去焦点事件和提交事件几乎同是发生，会造成button提交过去的是一个空值。解决办法：提交事件加个500毫秒的定时器

③、blindcomfirm

bindconfirm 点击完成按钮时触发。值获取：e.detail.value。这个按钮是键盘中的右下角完成按钮，使用这个事件，input类型只能是text。数据类键盘没有这个按钮。

④、bindsubmit

bindsubmit事件可以获取单个或者一直表单的值。值获取：e.detail.value.[name]。

4）、打印获得值的类型

console.log(typeof num);

5）、把this赋值给变量that，因为当调用微信接口时在微信接口使用this会认为是接口而不是当前的js文件。

例：拨打电话

dialing:function(e){

var tel = e.currentTarget.dataset.tel;

var that=this;

wx.makePhoneCall({

phoneNumber: tel,

success:function(msg){

that.setData({

popup: "1",

popupCont: "电话呼出中。。。"

});

}, fail:function(error){

that.setData({

popup: "1",

popupCont: "调用微信拨打电话接口失败！"

});

}

})

}

6）、定时器，2秒后隐藏或者调用hideDialing方法

setTimeout(function () {

that.hideDialing();

}, 2000);

7）、引用同一个js中的另外方法

otherA:function(){

var that=this;

that. hideDialing();

}

hideDialing:function(){

var that=this;

that.setData({

popup: "0",

popupCont: ""

});

}

7)、引用根目录js

//app.js   根目录js
App({
   globaData:'huangenai'
 })
//test.js
var app = getApp();
Page({
 onLoad: function () {
 console.log(app.globaData);
 } 
})

8）、引用其他目录的js，使用require

 //common.js
  function myfunc() {
console.log("myfunc....");
}
//开始调用
  var app;
var common = require("../../common.js");
Page({
data:{
  version:’’
},
onLoad:function() {
this.setData({version: ‘appName’});
common.myfunc(); //最后我们需要执行才能生效！
}
})

9）、this.setData({name:”1”}) name做成变量

①、

Page({

Data:{

name:”0”,

shuju:”2”;

ceshi:function(e){

Var c=e. currentTarget.dataset.name;//获得的只是shuju

this.setData({

[c]:”3”;

});

}

})

data中的shuju的值就变为3;

②、如若是要修改数组或者对象中的某一个值：先用一个变量，把（数组或者对象中的某一个值）用字符串拼接起来，再将变量写在[]里面即可。

data: {

info:[ {

name:"yuki",

tou:"../img/head.jpg",

zGong:130,

gMoney:222222

}]

}

onLoad: function () {

var that=this;

var up = "info[" + 0 + "].gMoney";//先用一个变量，把(info[0].gMoney)用字符串拼接起来

that.setData({

[up]:1

})

}

10）、data数据类型（字符串、数字、数组、对象）

data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'},{text: 'init data'}],
    object: {
      text: 'init data',
	text1: 'init data'
    }
  },

11）、类似ajax请求（wx. Request()）

注: header[‘content-type’]默认为 'application/json';如果method为GET则可以使用默认，method为POST则使用content-type：application/x-www-form-urlencoded

wx.request({
      url: '',
      data:{
        a:'',
        a:''
      },
      method:"POST",
header: { 'content-type': 'application/x-www-form-urlencoded' },
      success:function(res){

      },
      fail:function(e){
        
      }
    });

12）、上拉加载（注：1、按页查询读取，但是在js中要使用合并函数concat把新查询到的数据和旧数据合并，然后全部值赋值给对应的data里面。2、每次加载都从0到要加载的数据查询）

1）、onReachBottom

onReachBottom: function () {//上拉加载

console.log("wq");

this.setData({

count: [1,2,2,2,2,5,5,5,5,5]