本篇文章2195字,读完约5分钟

雷锋。作者薄卡军,成。雷锋。搜索“雷锋”。com "公共号码)已被作者授权发布。未经授权拒绝转载!

微信应用号 小程序最新开发教程第二弹

今天,经过波折,我承受了意想不到的压力和痛苦,最终决定继续发布我的更新教程。我想我没有泄露公司的代码,也没有提供泄露的开发工具来下载。我只是从程的角度写了一篇发展日志。我已经做好了最坏的打算。即使我放弃这份工作,我也会把完成的教程交给名片盒团队继续更新和发布!如果你做了,你永远不会后悔!只是博卡军的水平有限,所以请你宽容一点。

微信应用号 小程序最新开发教程第二弹

上面!开始了:

提示:

http://wxopen.notedown/

微信小程序的应用编程接口在这里复制

第三章:微信小程序项目结构和配置找到你创建的演示文件夹,将项目导入你的编辑器。在这里,你使用崇高的文本编辑器。

微信应用号 小程序最新开发教程第二弹

此时,它需要根据自己的项目需求结构进行更改。在项目根目录下有几个由主页和应用程序的一些配置文件呈现的标签页。例如,名片盒项目的标签栏有三个切换菜单:

微信应用号 小程序最新开发教程第二弹

让我们先找到app.json文件,打开并配置这些菜单,然后配置“tabbar”。您可以直接将配置文件更改为您自己的设计。

微信应用号 小程序最新开发教程第二弹

app.json中有几个配置项目:

这是一个书面的js文件。后缀。这里不需要js。如果配置了正确的路径,可以正常应用(如果应用程序无法重启微信开发工具,将直接报告页面错误)。

微信应用号 小程序最新开发教程第二弹

窗口:在顶部配置一些样式,详细介绍文档。

底部有几种配置。

网络超时:暂时没有使用。建议阅读该文档。

根据实际项目要求添加和更改。

Iconpath和selectediconpath:底部菜单按钮图片通过开关点击突出显示。

“文本”:你可以删除它。如果你把它都去掉,你会发现底部的塔巴高度会降低很多。

微信应用号 小程序最新开发教程第二弹

配置好json文件后,根据项目创建文件。

演示:存储假数据。这个问题中的开发工具需要支持。假数据的形式是。js文件。

微信应用号 小程序最新开发教程第二弹

json内部的数据结构是一致的,所以只需公开数据。

然后把需要的数据拿进来,使用起来非常方便;

图像:图像路径;

页面:除了tabar以外的页面;

服务:服务交付层(用于协调真实数据和背景);

一些常见的css文件。

当你看到这里,你会发现每一页都有三个不同的后缀。单独的页面,css,js目前只能遵循这个,这是微信应用号的一个规范。

微信应用号 小程序最新开发教程第二弹

Wxss文件是您编写的样式文件,或者您可以直接在其中编写样式。

Js文件需要配置成页面才能生效。

下一章:微信小程序主页开发。

第四章:经过各种准备和配置,我们来到了微信小程序的首页开发。首先,您需要实现如下的主页渲染:

微信应用号 小程序最新开发教程第二弹

模板有很多名片,所以你需要使用模板。

这里需要微信提供的基本组件大致是输入(搜索框),

行动表(右边是底部的下拉菜单,需要一个下拉菜单),

滚动视图(abc跳转到右侧),(当前实施中仍有一些问题,正在克服中)。

视图是一个块元素,是整个搜索框的样式。

名片文件夹:由于本项目侧重于名片功能,所以在很多地方都有使用,所以有必要用模板来分隔名片。

微信应用号 小程序最新开发教程第二弹

模板:定义一个模板。模板的名称实际上是一个范围。

块:循环控制,有许多名片,必须流通,这类似于许多操作数据的前端帧流通。

微信应用号 小程序最新开发教程第二弹

支持自定义属性数据,用于判断在线名片和离线名片。

在视图中,引入了一些数据,并且有三维操作符。

引入模板非常方便。信息系统与名称相同,数据由名称数据传递的数据填充。

微信应用号 小程序最新开发教程第二弹

一切都以数据为中心点。

根据您的数据结构获取数据具体操作:

这里的数据结构与json数据结构相同,

如果你想把它传到这里的页面,它就是

this.setdata({

name data:card _ list _ name . data . cards,

time data:card _ list _ time . data . cards

});

因为页面遍历名称数据、时间数据

您可以查看打印的数据结构,并根据您的结构进行分析和传输。

您也可以在这里查看对数据的一些操作。(必须根据这里定义的json数据格式进行操作。(

微信应用号 小程序最新开发教程第二弹

名片的风格是放在共同的。css,因为许多页面需要使用。所有页面都使用这个公共. css,并且需要一些初始化设置。它只能在pp.wxss中引用后映射到全局应用程序..

微信应用号 小程序最新开发教程第二弹

搜索框:其中bindchange是输入框改变的事件。微信提供的bindchange支持还有一个小问题。目前,这一事件只能通过失去焦点来触发。让我们等待后续的改进,首先实现功能。

微信应用号 小程序最新开发教程第二弹

bindinputchange:函数(e){

//搜索发生了

var self =这个;//这个绑定,这个这个指向微信提供的窗口

var text = e . detail . value . touppercase();//获取输入内容

如果(text==""){ //如果输入的是空,则需要显示一些内容,否则将不会显示。

show _ letter = " block

}其他{

show _ letter = " none

{}

this.setdata({

显示字母:显示字母,

showsheet:true

});

var res = namedata获取传递的数据

if(data_type=="name"){

}否则if(data_type=="time"){

res=时间数据;

};

For(var k in res){ //for-in循环到数据中的卡

var数据=res[k]。卡片;

来源:罗盘报中文网

标题:微信应用号 小程序最新开发教程第二弹

地址:http://www.lzn4.com/lpbxw/11935.html