iKcamp出品｜微信小程序｜小试牛刀(视频)+发布流程｜基于最新版1.0开发者工具初中级教程分享

iKcamp官网：http://www.ikcamp.com

访问官网更快阅读所有免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。
包含：文章、视频、源代码

第一章：小程序初级入门教程

小试牛刀【含视频】

视频地址：https://v.qq.com/x/page/i0554akzobq.html

这一章节中，咱们尝试着写一个最简单的例子，包含 2 个静态页面，并增长菜单导航功能。小体验一把。

Step 1. 清理结构

清理后以下结构，只保留了两个 必备 文件，同时作以下修改：

├── app.js
├── app.json

//app.js
App({
  onLaunch: function () {

  }
})

{
  "pages":[
  ],
  "window":{
    "navigationBarBackgroundColor": "#09ba07",
    "navigationBarTextStyle": "#fff",
    "navigationBarTitleText": "牛刀小试",
    "backgroundColor": "#fbf9fe",
    "backgroundTextStyle": "light"
  }
}

修改后，看下控制台有报错信息，由于咱们把页面全都干掉了。

从报错信息来看，很明显，小程序默认会从 pages 字段中读取第一个地址，做为首页加载 -- 知识点。

Step 2. 增长 flex 页面

ok，如今开始添加咱们的第一个页面，给它起个名字叫 flex 吧，防止你们 误觉得名字叫 index 的才是默认打开的页面 :)

增长 flex 页面文件

├─ mypages/
│   ├─ flex/
│       ├─ flex.js        // 空文件
│       ├─ flex.wxml      // 空文件
│       ├─ flex.wxss      // 空文件
├── app.js
├── app.json

在 app.json 中增长 flex 页面的配置地址

"pages":[
  "mypages/flex/flex"  
]

想要 flex 页面生效，须要在 flex.js 中调用全局函数：

// flex.js
Page({

})

Page() 函数接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
这时候再看下显示效果，已经没有报错信息了。
<div align="right">哗--!整个世界清净了 —— 《大话西游》</div>

Step 3. 书写简单的 flex 布局页面

如今咱们来实现一个简单的 flex 布局效果，就像微信官方平台展现的那个样子：

首先，在 flex.wxml 文件中增长布局标签：

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp flex-row">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp flex-col">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

而后在 flex.wxss 中，增长各 class 的样式：

.section__title{
  padding: 40rpx;
}
.flex-wrp{
  display: flex;
  flex-direction: row;
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-item{
  color: #fff;
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}
.bc_green{
  background-color: #09ba07;
}
.bc_red{
  background-color: #f76160;
}
.bc_blue{
  background-color: #0faeff;
}

这里主要的东西就是关于 flex 的简单布局，想了解更多关于 flex 的同窗，能够查阅下 flex 布局教程

通常状况下，不一样的页面，都应该有一个独特的 title，这就须要咱们就给 flex 添加一个独立的配置文件 flex.json：

{
  "navigationBarTitleText": "Flex-布局"
}

注意，与最外层的 app.json 不一样的地方是，flex.json 是对全局配置 app.json 的补充，且只能覆盖 app.json 的 window 字段配置信息

Step 4. 增长 list 页面

list 页面，多少会比 flex 要复杂些。

刚进入到页面时候，显示没有数据的提示信息。随着用户往下滑动，咱们须要动态的增长数据，每下滑一次，增长 3 条数据吧，最多 30 条数据。
一样的，先增长须要的文件：

├─ mypages/
│   ├─ flex/
│       ├─ flex.js
│       ├─ flex.wxml
│       ├─ flex.wxss
│       ├─ flex.json
│   ├─ list/
│       ├─ list.js
│       ├─ list.wxml
│       ├─ list.wxss
├── app.js
├── app.json

同时，咱们对小程序增长一个 底部导航菜单，方便测试咱们的页面切换。
修改 app.json 文件：

{
  "pages":[
    "mypages/flex/flex",
    "mypages/list/list"
  ],
  "window": {
    "navigationBarBackgroundColor": "#09ba07",
    "navigationBarTextStyle": "#fff",
    "navigationBarTitleText": "牛刀小试",
    "backgroundColor": "#fbf9fe",
    "backgroundTextStyle": "light"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#2EBF76",
    "borderStyle": "white",
    "backgroundColor": "#f6f8f9",
    "position": "bottom",
    "list": [{
      "pagePath": "mypages/flex/flex",
      "text": "布局"
    }, {
      "pagePath": "mypages/list/list",
      "text": "列表"
    }]
  }
}

咱们先来实现 js 部分的逻辑，因为须要把数据显示在视图 wxml 中，咱们须要增长 data 字段 ：

Page({
  data: {
    arrList: []
  }
})

这里说明下，wxml 中的动态数据均来自对应 Page 的 data。当 data 中的数据经过 this.setData 发生变化时候，视图会随之更新变化。

由于咱们是在用户下滑时候更新数据，这里咱们调用下 onReachBottom 函数（当到达页面底部时候触发）：

Page({
  data: {
    arrList: []
  },
  //微信官方提供的事件处理函数，当页面上拉触底时候自动调用该函数
  onReachBottom(){
    console.log('到达页面底部运行此函数')
  }
})

而后咱们开始增长数据的业务逻辑：

Page({
  data: {
    arrList: []
  },
  onReachBottom(){
    console.log('到达页面底部运行此函数')
    this.updateArrList();
  },
  updateArrList(){
    let arr = this.data.arrList
    arr.push( ...this.createData() )
    this.setData({
      arrList: arr
    })
  },
  createData(){
    let length = this.data.arrList.length
    if(length >= 30 ) return [];
    return Array.from({length: 3},(v, i)=>`数据${1+i+length}`)
  }
})

当页面到达底部，会调用 onReachBottom 函数，在 onReachBottom 的最后，咱们 尾调用 自定义的函数 updateArrList 来更新数据。
createData 函数的做用只是单纯的返回包含 3 个元素的数组，最后拼接后的新数据，会经过 setData 更新数据 arrList，当数据更新后，视图会自动更新。

接下来，咱们修改视图文件 list.wxml：

<view class="container">
  <block wx:for="{{arrList}}" wx:key="">
    <view class="item">
      <text>{{item}}</text>
    </view>
  </block>
  <block wx:if="{{arrList.length==0}}">
    <view class="item">
      <text>下拉加载数据</text>
    </view>
  </block>
</view>

block 标签并不属于组件，不会在页面中渲染，仅做接收控制属性用
for 循环指令包裹的范围内，子元素默认是 item，若是想从新定义它的名字，能够在 wx:for="{{arrList}}" 后面增长 wx:for-item="item"，一样的，也能够指定数组下标 wx:for-index="index"

咱们对页面样式作简单的优化，因为当页面高度不够时候，难以操做触发 onReachBottom，故咱们给当前的页面外层标签 page 加一个 150% 高度：

page{
  height: 150%;
}
.item{
  background-color:#f6f8f9;
  color:#9a9a9a;
  font-size:14px;
  padding: 10px 20px;
  margin-bottom:15px;
}

一样的，咱们也给 list 页面加一个 title，增长 list.json 文件：

{
  "navigationBarTitleText": "展现数据"
}

大功告成！！！预览下小 demo 效果

若是以前有 appID，也能够在手机端预览

小程序：审核发布流程

官方文档比较详细了点击查看

上一篇－iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新版1.0开发者工具初中级教程分享

下期更新内容：小程序初级入门教程－第二章：小程序中级实战教程：预备篇

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

---

相关文章：
据说 2017 你想写前端？
前端开发者指南（2017）
翻译连载 |《你不知道的JS》姊妹篇 | JavaScript 轻量级函数式编程
翻译 | 关键CSS和Webpack: 减小阻塞渲染的CSS的自动化解决方案

iKcamp最新活动

报名地址：http://www.huodongxing.com/ev...