admin 管理员组

文章数量: 888394

微信小程序基于最新版1.0开发者工具分享－小试牛刀(视频) 发布流程

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

小试牛刀【含视频】

视频地址：.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

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

一般情况下，不同的页面，都应该有一个独特的

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.arrListarr.push( ...this.createData() )this.setData({arrList: arr})},createData(){let length = this.data.arrList.lengthif(length >= 30 ) return [];return Array.from({length: 3},(v, i)=>`数据${1 i length}`)}
})

当页面到达底部，会调用

onReachBottom

onReachBottom

尾调用

updateArrList

createData

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前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp官网：

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

本文标签： 微信小程序基于最新版10开发者工具分享－小试牛刀(视频) 发布流程