微信小程序学习记录

最新推荐文章于 2022-05-07 10:42:25 发布

蟑螂恶霸BBQ

最新推荐文章于 2022-05-07 10:42:25 发布

阅读量225

点赞数

分类专栏： pro

本文链接：https://blog.csdn.net/android410223sun/article/details/110818290

版权

pro 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

本来js跟h5也就能看懂的水平，不会写，本以为小程序很难，最近接触了下，记录记录。

自己做的功能如下：1，登录界面 2，网络请求 3，列表展示 4，item点击 5，图片加载 6，下拉刷新数据 7，上拉加载数据 8，验证码功能 9，底部弹窗列表item点击选择 10，页面跳转和传值

看看界面吧，挺丑的，反正自己玩的没有设计图，只看功能就好……

1，登录界面样式自己随便写布局有row和column 就是Android中LinnerLayout的横向和纵向

</view>

</view>

通过这个属性bindinput 可以在js中获取到输入的内容如下

inputusername: function (e) {

//将输入的用户名称的值赋给全局的data中的username 然后在点击login按钮的时候取全局data中的username 密码同理

this.setData({

username: e.detail.value

})

2，网络请求和根据键取值（这里请求的https://www.weather.com，都需要去后台的开发设置--接口设置添加，跳转到小程序的web-view中的url也需要添加配置，tip:跳转web-view这个url配置了偶尔也会失灵....）

var that = this;

wx.request({

url: 'https://www.weather.com.cn/data/sk/101010100.html',

data: {},

// method: "POST",

header: {

'content-type': 'json' // 默认值

// 'content-type':'application/x-www-form-urlencoded'

success: function (res) {

console.log(res.data.weatherinfo.sm) //取那个就.那个就行了

}

})

3，列表展示

</view>

wx:for就是渲染成列表的关键

4，item点击和传值上面注册的点击事件bindtap="clickItem" 跟点击要获得的index关键是 data-bean="{{index}}" ，然后

//获取点击的index

clickItem: function(e){

var that = this;

var index = e.currentTarget.dataset.bean;

//把某个参数（例url）传递到下个页面

url: '../webview/webview?url='+that.data.listData[index].url,

5，图片加载我这里说的是使用本地的图片

在你要使用该图片的page下新建image文件夹把图片放进去，然后在wxml中这么使用就行了

<view>

</view>

6，下拉刷新数据

在要添加下拉刷新的page的json文件中新增"enablePullDownRefresh": true 如下

"usingComponents": {},

"enablePullDownRefresh": true

然后在

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

wx.showNavigationBarLoading() //在标题栏中显示加载

//模拟3s下拉刷新的异步操作完成后停止这个下拉刷新

this.setData({

//不展示正在请求数据和没有更多数据了的底部添加

showloading:false,

showloaded:false,

})

this.jishiqi() //倒计时模仿异步请求接口的操作 jishiqi这个函数需要写在这个函数的上面

jishiqi : function (){

var that = this;

var num = 3;

// var datanews = [];

var addData = [{name:"我就是我",img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607331222108&di=2ce09338277db412ca8950ee82ed5ea9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F08%2F20181008185834_sgnqc.jpg",info:"画大象的小新",url:"https://lol.qq.com/guides/detail.shtml?ADTAG=cooperation.glzx.web&name=Annie&line=mid"}];

var timer = setInterval(function () {

num--;

if (num <= 0) {

console.log("加载完了");

clearInterval(timer);

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh();

// datanews.concat(addData);

that.setData({

// listData:that.data.listData.concat(addData)

listData:addData,

})

}

}, 1000)

7，上拉加载数据

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

//上拉加载三次后模拟分页加载已经完成不再请求

if(this.data.addcount >= 3){

this.setData({

showloading:false,

showloaded:true,

});

return;

}

var addData = [{name:"我就是我123456",img:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607331222108&di=2ce09338277db412ca8950ee82ed5ea9&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F08%2F20181008185834_sgnqc.jpg",info:"画大象的小新123456",url:"https://lol.qq.com/guides/detail.shtml?ADTAG=cooperation.glzx.web&name=Annie&line=mid"}];

var that = this;

var num = 3;

var timer = setInterval(function () {

num--;

if (num <= 0) {

console.log("加载完了");

clearInterval(timer);

wx.hideNavigationBarLoading() //完成停止加载

wx.stopPullDownRefresh();

that.setData({

listData:that.data.listData.concat(addData),

showloading:true,

showloaded:false,

addcount:that.data.addcount+1,

})

}

}, 1000)

8，验证码功能，因为我用的text显示的验证码不能使用button的disable功能所以用全局变量disabled控制该text是否能点击。。。

getyzm: function () {

var _this = this;

var num = 61;

if (!_this.data.disabled) {

var timer = setInterval(function () {

num--;

if (num <= 0) {

clearInterval(timer);

_this.setData({

codename: '重新发送',

disabled: false,

fontcolor: '#f00'

})

} else {

_this.setData({

codename: num + "s",

disabled: true,

fontcolor: '#00f'

})

}

}, 1000)

}

9，底部弹窗列表item点击选择

wx.showActionSheet({

//写一个底部弹窗和点击事件

itemList: ['haha', 'baba'],

itemColor: '#f00',

success: function (res) {

if (res.tapIndex === 0) {

wx.showToast({

title: 'haha',

icon: "none",

})

} else if (res.tapIndex === 1) {

wx.showToast({

title: 'baba',

icon: "none",

})

}

fail: function (res) {

}

}),

10，页面跳转和传值我现在也只学了最基础的即通过跳转的url传值

toPageTest: function () {

//写一个跳转到listView界面

wx.navigateTo({ // navigateTo相当于android startActivity中的activity标准模式

url: '../listpage/listpage?name=123&pwd=123456',

})

然后再listpage界面的onload有参函数获取

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

var op = options;

console.log(op.name +'is'+ op.pwd)// raymond is male

//模拟请求第一页的数据

this.getFirstDataNetWork();

tip：函数里回调中（网络请求/倒计时等），都需要先把this转换才能使用，即var thst = this; 否则无法访问和赋值全局变量。

2020-12-16 ADD：

11.全局变量定义和使用

在项目的app.js里面新加如下：

globalData: {

userInfo: null,

hasLogin: "false",

opnid: null

在page里面使用的时候在最上面（page花括号外面）写：

const app = getApp()

然后使用的时候这样就行了用app代替this

app.globalData.userInfo

12.底部切换tab使用（必须大于等于2个小于等于5个）

在项目的app.json里添加如下，配置页面来回切换的icon 、字体颜色和tab对应的page

"tabBar": {

"color": "#a9b7b7",

"selectedColor": "#f00",

"borderStyle": "black" ,

"list": [{

"selectedIconPath": "imgages/bg.png",

"iconPath": "imgages/bg.png",

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

"text": "首页"

}, {

"selectedIconPath": "imgages/bg.png",

"iconPath": "imgages/bg.png",

"pagePath": "pages/listpage/listpage",

"text": "列表"

},{

"selectedIconPath": "imgages/bg.png",

"iconPath": "imgages/bg.png",

"pagePath": "pages/bannerpage/bannerpage",

"text": "轮播图"

}

]

}

蟑螂恶霸BBQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序学习记录

本来js跟h5也就能看懂的水平，不会写，本以为小程序很难，最近接触了下，记录记录。自己做的功能如下：1，登录界面 2，网络请求 3，列表展示 4，item点击 5，图片加载 6，下拉刷新数据 7，上拉加载数据 8，验证码功能 9，底部弹窗列表item点击选择 10，页面跳转和传值看看界面吧，挺丑的，反正自己玩的没有设计图，只看功能就好……1，登录界面样式自己随便写布局有row和column 就是Android中Linne...
复制链接

扫一扫

专栏目录