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

时间：2023-04-02 15:59:40 HTML

iKcamp官网：http://www.ikcamp.com访问官网全部免费阅读分享课：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包括：文章、视频、源码第一章：小程序初级入门教程小试玩【含视频】视频地址：https://v.qq.com/x/page/i0554akzobq.html这一章，我们尝试写最简单的例子，包含2个静态页面，并添加菜单导航功能。有一点经验。步骤1.清理结构。清理后结构如下，只保留两个必须的文件，同时修改如下：├──app.js├──app.json//app.jsApp({onLaunch:function(){}}){"pages":[],"window":{"navigationBarBackgroundColor":"#09ba07","navigationBarTextStyle":"#fff","navigationBarTitleText":"小测试","backgroundColor":"#fbf9fe","backgroundTextStyle":"light"}}修改后，查看控制台是否有错误信息，因为我们杀死了所有页面。从报错信息可以看出，小程序默认会从pages字段中读取第一个地址，作为首页加载——知识点。Step2.添加flexpageok，现在我们来添加我们的第一个页面吧，起名叫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.jsPage({})Page()函数接受一个对象参数，该参数指定页面的初始数据、生命周期函数、事件处理函数等。这时候再看显示效果，并没有报错信息。哇——！整个世界都干净了--《大话西游》

第三步，写一个简单的flex布局页面下面我们来实现一个简单的flex布局效果，就像微信官方平台的样子：首先，添加一个layout标签到flex.wxml文件：flex-direction:row

123flex-direction:column

123然后在flex.wxss中，添加每个类的样式：.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;宽度：200rpx；高度：200rpx；文本对齐：居中；line-height:200rpx;}.bc_green{background-color:#09ba07;}.bc_red{background-color:#f76160;}.bc_blue{background-color:#0faeff;}这里主要是flex的简单布局.想深入了解flex的同学可以参考下一篇flex布局教程一般来说，不同的页面应该有一个唯一的标题，这就需要我们为flex添加一个独立的配置文件flex.json:{"navigationBarTitleText":"Flex-Layout"}注意，与最外层的app.json不同的是，flex.json是对全局配置app.json的补充，只能覆盖app.json的window字段配置信息。第四步，添加列表页。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":"Layout"},{"pagePath":"mypages/list/list","text":"list"}]}}先来实现js部分的逻辑。由于视图wxml中需要显示数据，所以我们需要添加数据字段：Page({data:{arrList:[]}})这里，wxml中的动态数据来自对应Page的数据。当data中的数据通过this.setData改变时，view也会随之更新。因为我们是在用户向下滑动时更新数据，所以这里调用了onReachBottom函数（到达页面底部时触发）：Page({data:{arrList:[]},//官方提供的事件处理函数微信，当页面拉到底部的时候会自动调用这个函数onReachBottom(){console.log('到达页面底部运行这个函数')}})然后我们开始添加数据业务logic:Page({data:{arrList:[]},onReachBottom(){console.log('到达页面底部并运行这个函数')this.updateArrList();},updateArrList(){letarr=this.data.arrListarr.push(...this.createData())this.setData({arrList:arr})},createData(){letlength=this.data.arrList.lengthif(length>=30)return[];returnArray.from({length:3},(v,i)=>`data${1+i+length}`)}})当页面到达底部时，onReachBottom函数就会叫。在onReachBottom结束时，我们调用自定义函数updateArrList来更新数据。createData函数的作用只是返回一个包含3个元素的数组。拼接后的新数据会通过setData更新数据arrList。当数据更新时，视图会自动更新。接下来我们修改视图文件list.wxml：{{item}}下载数据block标签不属于组件，不会在页面上渲染。它仅用于接收由for循环指令包裹的范围内的控制属性。默认的子元素是item。如果要重新定义它的名字，可以在wx:for="{{arrList}}"之后加上wx:for-item="item"；同样的，也可以指定数组下标wx:for-index="index"我们简单优化一下页面样式，因为页面高度不够的时候很难触发onReachBottom，所以我们在外边加了一个150%的高度当前页面标签页：page{height:150%;}.item{background-color:#f6f8f9;颜色：#9a9a9a；字体大小：14px；填充：10px20px；margin-bottom:15px;}同样的，我们也给列表页添加一个title，添加list.json文件：{"navigationBarTitleText":"Displaydata"}大功告成！！！预览小demo的效果。如果之前有appID，也可以在手机端预览小程序：官方文档审核发布过程比较详细。点击查看上一篇-iKcamp出品｜微信小程序｜工具安装+目录说明｜基于最新1.0版开发者工具初中级教程分享下期更新内容：小程序入门教程-第二章：小程序中级实战教程：预备篇iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售相关文章：听说2017年你想写前端？前端开发者指南（2017）翻译连载|《你不知道的JS》同伴|JavaScript轻量级函数式编程翻译|KeyCSSandWebpack:Anautomatedsolutiontoreducerendering-blockingCSSiKcamp最新活动报名地址：http://www.huodongxing.com/ev...

上一篇：悬浮效果

下一篇：如何从JavaScript飞跃到TypeScript【基础进阶知识点】

iKcamp出品｜微信小程序｜小试（视频）+发布流程｜基于最新1.0版开发者工具初中级教程分享相关文章