专栏首页iKcamp微信小程序基于最新版1.0开发者工具分享-小试牛刀(视频)+发布流程

微信小程序基于最新版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 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。 这时候再看下显示效果,已经没有报错信息了。

哗--!整个世界清净了 —— 《大话西游》

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.jsonwindow 字段配置信息

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 中的动态数据均来自对应 Pagedata。当 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,也可以在手机端预览

小程序:审核发布流程

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序教学第三章第三节(含视频):小程序中级实战教程:视图与数据关联

    § 视图与数据关联 本文配套视频地址: https://v.qq.com/x/page/z0554wyswib.html 开始前请把 ch3-3 分支...

    iKcamp
  • 听说2017你想写前端?

    作者:Jay(沪江开发工程师) 本文为原创文章,转载请注明作者及出处 不好意思,没有像其他公众号一样赶着发文章,每年到这个时候总有一大波什么今年前端预测,技...

    iKcamp
  • 翻译 | 使用A-Frame打造WebVR版《我的世界》

    原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是...

    iKcamp
  • 微信小程序-view元素Flex布局

    对于网页布局,推荐 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。可以参考完全教材,我推荐一个阮老师的,下面...

    叉叉敌
  • css3 flex弹性布局总结

    本文涉及内容如下: flexbox的基本概念、容器属性学习、项目属性学习、实战演练。 flexbox 堪称布局神器,但属性实在太多让人无从下手,因此将自己所学的...

    十月梦想
  • 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有...

    pingan8787
  • 弹性(Flex)布局的使用

    最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少。

    嘉为科技
  • css3 Flex布局 学习

    在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis),这是默认的设置,当然你可以通过修改使垂直方向变为主轴...

    heidsoft
  • CSS:10分钟搞定Flex布局

    Flexbox Layout(弹性盒子布局),是CSS3的一种新型布局模式,给很多CSS老大难问题提供了优雅的解决方案(例如:垂直居中

    WEBJ2EE
  • 深入 CSS 中的弹性盒子 Flexible Box

    弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。

    IT技术小咖

扫码关注云+社区

领取腾讯云代金券