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

最新推荐文章于 2023-03-10 20:19:36 发布

我爱学习-编程

最新推荐文章于 2023-03-10 20:19:36 发布

阅读量516

点赞数

分类专栏：（小程序篇）文章标签：微信小程序小白学习分享经验微信

本文链接：https://blog.csdn.net/qq_37827020/article/details/80594698

版权

（小程序篇）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

首先我们先申请一个自己的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]; 
 
   },