• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

软件专业应届生小程序学习分享

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

   以下分享纯属个人理解,如果有不对的地方欢迎指出,欢迎共同学习、交流, 。

   我是先从微信小程序入手的,因为这个比较简单,就自己做一个玩玩,话不多说,上代码。

   首先我们先申请一个自己的AppId,这个下面的链接里面有微信的教程,很详细,就不多说了。

   小程序微信里面自己封装了很多的方法,大家可以查阅小程序API文档学习,里面有开发工具一些东西,自行下载就可以:

    点击打开链接

    小程序项目目录:

     .js文件就是我们学的javascript

     .json文件目前只知道给页面命名

     .wxml文件里面写一些样式,就和我们写的html差不多,div换成了view

     .wxss文件就是写css样式的


           这是我写的一个电商小程序,话不多说,直接上代码。

.wxml

<!--轮播图-->
<swiper class="home-swiper" indicator-dots="true" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for-items="{{lunboData}}">
<swiper-item>
<image src="{{item.imgurl}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
这个swiper是一个滑动视图容器,大家可以看API组件里面有它的属性,这个block把它给了一个块状,里面wx:for-items="{{}}"把里面的数据按照下标做了个循环.

onLoad: function () {
this.getLocation();
var that = this;
var data = {
"datas": [
{
"id": 1,
"imgurl": "/images/l1.jpg"
},
{
"id": 2,
"imgurl": "/images/l2.png"
},
{
"id": 3,
"imgurl": "/images/l3.png"
},
{
"id": 4,
"imgurl": "/images/l4.png"
}
],

};
that.setData({
lunboData: data.datas,
rightItem: this.data.right[0]
})
},

我们在onload函数(页面初加载)里面写datas数组然后把它给变量data,这下面的that.setData是因为我们上面定义了 let that=this,所以可以用that代替this,然后把datas赋值给lunboData这个变量,把它在wxml文件里面显示出来,上图{{}}两个花括号里面写变量名就行,这里的that.setData就是给页面变量赋值的。然后swiper-item里给个图片标签src属性里面把图片路径变量名给它就行,这个item就相当于控制整个页面变量的东西。轮播图就这些东西了,还有有些变量控制属性,这个在data里面自己给就可以了。


中间这个是一个地图定位的东西,可以获取到你的当前位置,话不多说,上代码。

getLocation: function () {
var page = this
wx.getLocation({
type: 'wgs84',
success: function (res) {
// success
var longitude = res.longitude
var latitude = res.latitude
page.loadCity(longitude, latitude)
}
})
},
loadCity: function (longitude, latitude) {
var page = this
wx.request({
url: 'https://api.map.baidu.com/geocoder/v2/?ak=4WWqIsrKcOD7Tli39HeyAsx41DZ77bED&location=' + latitude + ',' + longitude + '&output=json', //调用百度地图API接口
data: {},
header: {
'Content-Type': 'application/json'
},
success: function (res) {
var city = res.data.result.addressComponent.city; //获取返回的城市地址
var district = res.data.result.addressComponent.district; //获取返回的地区值
page.setData({ currentCity: city }); //设置当前城市名称
page.setData({ currentdistrict: district }); //设置当前地区名称
},
fail: function () {
page.setData({ currentCity: "获取定位失败" });
},

})
},

这个wx.getlocation是微信自己封装的一个获取当前经纬度的方法,我们用它来获取经纬度,然后调用百度地图API的接口逆地址解析一下这个经纬度,把它得到成我们的实际地名,把它里面的数据获取到显示下就行。这个东西ak=4WWqIsrKcOD7Tli39HeyAsx41DZ77bED是我注册的一个百度地图接口的秘钥,忘了怎么弄到了,不过拿到别的

项目中也可以用的。


这个最下面的是一个tabBar固定在页面底部的东西,它是写在app.json里面的,上代码。

"tabBar": {
"color": "black",
"selectedColor": "#11cd6e",
"height": "2000rpx",
"list": [
{
"selectedIconPath": "images/home.png",
"iconPath": "images/home.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "images/shopping-cart.png",
"iconPath": "images/shopping-cart.png",
"pagePath": "pages/Cart/Cart",
"text": "自助点单"
},
{
"selectedIconPath": "images/my.png",
"iconPath": "images/my.png",
"pagePath": "pages/myaccount/myaccount",
"text": "我的账户"
}
]
}

很好用的一个东西,里面有一些图片图标是我在阿里图标库里面下载的,你直接百度阿里矢量图标库就行。app.json里面可以定义页面的路径,就如上面的pagePath里面的一样。哪个页面放在第一个就运行哪个页面。


中间的这个商品展示是用数组循环嵌套实现的,上代码

<!--使用循环嵌套data数据格式-->
<view class='view-center'>
<scroll-view class="left" scroll-y scroll-into-view="{{toView}}">
<view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}" bindtap="left">
<view class="left_name">{{item.txt}}</view>
</view>
</scroll-view>
<scroll-view class="right" scroll-y bindscroll="scroll" scroll-into-view="{{toView}}">
<view class="li {{index==_click?'yes':''}}" data-i="{{index}}" wx:for="{{rightItem.li}}"
bindtap='right'>
<image class="goods_img" src="{{item.src}}"></image>
<text class="name">{{item.name}}</text>
<text class="name">{{item.prince}}</text>
<image class="cart_goods" src='/../images/cart.png' bindtap='showModel'>
</image>
</view>
</scroll-view>
左边点击下标右边循环列表,

left: function (e) {
var j = parseInt(e.currentTarget.dataset.i);
this.setData({
_click: j, //控制左侧点击后样式
rightItem: this.data.right[j],
}
)
let leftbar = j
},
right: function (e) {
var page = this;
let goodsid=e.currentTarget.dataset.i;
let src=page.data.rightItem.li[goodsid];
},

setdata里面的变量自己在data里面定义就好,感觉说的都太简单了。。。说不下去了,大神别笑话啊。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【干货#003】自定义小程序客服按钮发布时间:2022-07-18
下一篇:
微信小程序中 数据缓存发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap