微信小程序的开发

现在一直看到有关于微信小程序的问题，我也来看看这个是怎么弄的我是以个人的身份开注册是微信小程序

1.点击微信公众平台里面的注册，就会看到有四个账号类型，点击小程序，然后看到这个页面

填写完整自己的信息，就注册完成了！

注意：在填写小程序名字的时候要想好，因为这个名字在发布之后，就不能更改了

2，登录微信小程序

在首页看到的是这个页面，然后看流程那儿，很清楚的说明了之后应该执行哪几步

流程走完之后，就进入了开发阶段，我们可以看一下官方的文档（https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017712），这里面包括了大部分的组件框架 api等，基本满足我们的需求。现在介绍几个构成一个页面：

就只是写了一个页面

1.轮播图

html
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="100%" height="150"/>
    </swiper-item>
  </block>
</swiper>

js
Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    hasLocation: false
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  },
});
css
image{width:100%}

2.分类

html
<view class="section sort">
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item" hover-class="active">美食</view>
    <view class="flex-item" hover-class="active">甜点</view>
    <view class="flex-item" hover-class="active">工作餐</view>
    <view class="flex-item" hover-class="active">夜宵</view>
  </view>
</view>

css
.sort .flex-item {
  width:25%;
  height:60px;
  line-height:60px;
  text-align:center;
  float:left;
  background:#e9f0fa
}
.sort .active{
  background:#dfe5ef
}

3.获取当前位置

html
<button class="map" bindtap="getLocation">map</button>

js
//获取经纬度
  getLocation: function (e) {
    console.log(e)
    var that = this
    wx.getLocation({
      type: 'gcj02', //返回可以用于wx.openLocation的经纬度
      success: function (res) {
        var latitude = res.latitude
        var longitude = res.longitude
        wx.openLocation({
          latitude: latitude,
          longitude: longitude,
          scale: 28
        })
      }
    })
  },

官方文档写的还是很清楚的

3.页面之间的跳转，要设置一下路由,在写之前要先看清楚官方的文档

从index跳转到detail并且获取到从index传给detail的参数这里面用的navigator并且渲染的时候用的是一个类似于vuejs中的v-for指令，然后再datail中用onLoad函数中的options获取到传递的参数

在index中

html
<!--然后是一些列表推送-->
<view class="page">
  <view class="page__bd">
    <view class="section section_gap list" wx:for="{{listImage}}" wx:for-item="item">
      <view class="section__ctn">
        <navigator url="/pages/index/detail/index?mark={{item.mark}}" hover-class="navigator-hover" style="height:100%">
           <image style=" width:30%;height: 100%; background-color: #eeeeee;" src="{{item.src}}"></image>
        </navigator>
      </view>
    </view>
  </view>
</view>

js
page中的data中
 listImage:[
      {mark:'one',src:'././image/1.jpeg'},
      { mark: 'two',src: '././image/2.jpeg'},
      { mark: 'three', src: '././image/3.png' },
      { mark: 'four',src: '././image/4.png' },
      { mark: 'five', src: '././image/5.jpeg' },
      { mark: 'six', src: '././image/6.png' },
    ]
  },

在app.json中

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/concat/index",
    "pages/index/detail/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

在detail中

html
<view class="section sort" style="height:60px;">
  <view class="flex-wrp" style="flex-direction:row;">
    {{mark}}
  </view>
</view>

js
Page({
  data: {
    mark:0
  },
  onLoad:function(options){
    this.setData({
      mark: options.mark
    })
  }
})

微信小程序的开发

推荐阅读