微信小程序入门教程

最近研究微信小程序，打算把客户的手机版也做成小程序，发现需要用到https，我们先本地搭建一下环境

下载官方开发工具

相关开发参考网址

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00064a9b998288cb0086840c65940a

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/release.html#%E8%BF%90%E8%90%A5%E6%95%B0%E6%8D%AE

然后下载一个demo研究一下他的语法。有点类似Vue

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

wxss类似于html里面的css文件

wxml类似html文件，常见的div 等标签换成了view block等

js文件类似逻辑处理问题

代码文件主要放在pages文件夹里面

我们打开index文件夹，看看里面有什么文件

我们在看看语法规则

index.js文件

//lists.js
//获取应用实例
var app = getApp()
Page({
  data: {
    newsList: [],
    page: 1,
    toastHidden: true,
    confirmHidden: true,
    isfrist: 1,
    loadHidden: true,
    currentTab: 0,
    msg: '没有更多文章了',
    imgUrls: [],
    slideurl: [],
    mod: [
      'aspectFit',
      'widthFix',
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000   
  },
  imageLoad: function (e) {
    var res = wx.getSystemInfoSync(); 
    var imgwidth = e.detail.width, 
        imgheight = e.detail.height, 
        ratio = imgwidth / imgheight; 
    this.setData({ bannerHeight: res.windowWidth / ratio })
    },
  loadData: function (page) {
//显示出加载中的提示
    this.setData({ loadHidden: false })
    var that = this
    wx.request({
      url: app.url + 'index.php?m=dbsource&c=call&a=get&id=2', //仅为示例，并非真实的接口地址
      data: { catid: 22, page: page },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var len = page + 1
        var dataArr = that.data.newsList
        var newData = dataArr.concat(res.data);
        that.setData({ page: len })
        that.setData(
          {
            newsList: newData
          }
        )
      },
      complete: function (res) {
        that.setData({ loadHidden: true})
      }
    })
  },
  loadMore: function (event) {
    var id = event.currentTarget.dataset.page
    this.loadData(id);
  },
  swichNav: function (event) {
    var that = this
    var cid = event.currentTarget.dataset.current
      that.setData({ currentTab: cid })
    if (cid ==0){
      wx.switchTab({
            url: '../../pages/index/index',
          })
    }
    if (cid == 1) {
      wx.navigateTo({
        url: '../../pages/shanxi/shanxi',
      })
    }
    if (cid == 2) {
      wx.navigateTo({
        url: '../../pages/renwen/renwen',
      })
    }
    if (cid == 3) {
      wx.navigateTo({
        url: '../../pages/lvyou/lvyou',
      })
    }
    if (cid == 4) {
      wx.navigateTo({
        url: '../../pages/shehui/shehui',
      })
    }
  }, 
  infolist: function(){
    var that = this
    wx.request({
      url: app.url + 'index.php?m=dbsource&c=call&a=get&id=1', //仅为示例，并非真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json' // 默认值  change  之前是index.php?m=dbsource&c=call&a=get&id=1
       },
      success: function(res) {
// console.log(res);
        that.setData({ infolist: res.data})
       }
    })
  },
  onLoad: function () {
    this.loadData(1);
//  this.slideimg();
  this.infolist();   //获取列表信息
  },
})

加载的时候调用loaddate和infolist获取数据分配到模板里面

然后index.wxml循环这个变量

<!--首页.wxml-->
<!-- 顶部导航 -->
<includesrc="../head/head.wxml"/> 
<viewclass="warp">
  <blockwx:for="{{infolist}}"wx:key="key">
          <viewclass="infos1"> 
              <viewclass="title">{{item.title}}</view>
              <viewclass="date">{{item.inputtime}}</view>
          </view>   
      </block>   
<!--文章列表模板 begin-->
<loadinghidden="{{loadHidden}}" >
    数据加载中...
</loading>
<viewbindtap="loadMore"data-page="{{page}}"class="loadMore" >【下一页123】</view>
</view>
<includesrc="../foot/foot.wxml"/>

这个页面没有太多的css文件。我们也还是看一下

.warp{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}
navigator { overflow: hidden;}
.banner{ width: 100%; height: auto; display: block;}
.slide-image{ width: 100%; display: block;}
.list {margin-bottom: 20rpx;height: 200rpx;position: relative;}
.imgs {float: left;}
.imgs image {display: block; width: 200rpx;height: 180rpx; background-size:cover;   }
.infos {float: left; width: 480rpx; height: 180rpx;padding: 20rpx 0 0 20rpx;}
.infos1 {float: left; width: 680rpx; height:180rpx;padding: 20rpx 0 0 20rpx; }
.title {font-size: 18px;}
.date {font-size: 12px;color: #aaa; position: absolute;bottom: 0;}
.loadMore {text-align: center;margin: 30px;color: #000;font-size: 14px; font-weight: bold;}

这样一个简单的主页数据都出来了

知道了语法规则。我们就可以一步步的开发出自己想要的微信小程序啦