微信小程序九宫格布局怎么开发

作者:小飞燕 发布时间:2021-03-08 08:39:43

导语本文整理了全网深受用户关注的个微信小程序九宫格布局怎么开发经验知识,可以帮助您全面了解代理怎么做,小白也能成为高手,跟随小编一起来看一看吧!

微信小程序九宫格的布局怎么开发?微信小程序九宫格主要由九个网格组成,那么如何开发微信小程序九宫格呢?下面是如何开发小编编写的微信小程序九宫格。

微信小程序九宫格怎么开发?

基于一个简单的思考,微信九宫格是三行三列。如果以一行为单位,把每一行分成三列,可以吗?我们来练习一下。

首先考虑九宫格数据的生成。每个格子都需要一个图标,一个标题,一条便于跳转的路线。那天我们有九页,所以我们可以定义一个一维数组。为了更好的后续配置,我们将这个数组分离成一个名为routes.js的文件,然后在index.js页面中引用它,并将routes放在index的目录中。微信代码如下:

在index.js页面中,我们引用routes.js,然后得到数据pageitems,但是pageitems是一维数组,我们认为一行三列应该作为一个组,所以我们需要重组这个一维数组。比较直接的方法是生成一个数组,每个数组元素包含一个只有三个元素的一维数组。代码如下。

在index.wxml中,我们布局了接口。既然每个格子都是一样的,但是数据不一样,我们就想到用微信模板来呈现。为此,我们首先制作一个模板表面.

在这里我们可以看到,从外部导入的微信数据嵌入在两个大括号中,然后我们可以在内部进行简单的逻辑判断,以便更好的呈现。例如,当text==null时,我们希望呈现一个背景为空的网格,当有数据时,我们希望呈现一个背景为空的网格,所以' {text==null||text.length==0 '?pages-icon-wrapper-no-bg ' : ' pages-icon-wrapper ' } } '。

还有一点,因为我们使用这个接口文件作为模板,所以我们必须用一个模板标签包装它,并给它一个名称,这样我们就可以识别引用该模板的调用。

现在我们在index.wxml中引用这个模板

模板被导入引用,模板和is用于调用它的地方,其中is指定cell.wxml中的名称.项[0],项[1],项[2]是循环传入数据,cellheight是index.js中存储的数据,将数据传入模板时,框架会以字段的形式展开,也就是键值对,所以再看看cell.wxml文件,会发现里面的数据直接用的是键。

在将数据呈现给界面之后,我们需要一种风格来匹配它。index.wxss的代码如下。

下面是题目的开头。小程序店的名片怎么生成?标题到此结束

小程序店的名片怎么生成?相信很多微信用户都知道,我们给微信好友推荐人的时候,可以发微信名片,也可以发小程序店的名片。如果开发出来,会更容易分享。

小程序店的名片怎么生成?

首先,跳转到我们新的applet商店名片的页面。

传递用户当前的userid,wx.navigateto jump with value。手动设置为真,以设置用户采用新路线。

新名片第1页的基本布局如下:

获取userid。

使用微信小程序的输入组件进行验证也很有用。例如,maxlength属性可以限制用户输入的长度。比如我的名字是5位数长,直拨号码是5。

也可以定制一些微信验证效果,具体可以根据自己的需要配置一些验证,获取用户输入的值,进行操作。

这里绑定了自带的模态框提示组件。

其中modalhidden2是模态盒开关。

另外,propttext是需要提示的内容。

甚至很多小程序输入框都支持动态数据变更,非常方便。

实际效果,非常快,比以前省了很多东西,写微信小程序,发现很大的好处可能是不用考虑一系列兼容性问题。

比较后还有一个微信小程序上传图片。经过测试,目前上传到后台服务器还存在一些问题,应该是内部测试版本不完善造成的。

直接设置背景图片。

提交表单并跳转。

表单是使用自己的bindsubmit事件小程序组件提交的。只需向按钮组件添加formtype="submit "。还应该注意的是,在使用表单提交功能时,名称属性应该添加到输入中。这种传输模式是键值对的形式。

这时我跳转到编辑页面2,根据用户填写的手机号码识别匹配的公司。页面很简单,只是一个数据循环,以后可能需要对收音盒进行美化。

也是一些数据绑定和验证效果。

实际渲染效果可见一。

这和第一个编辑页面的逻辑基本相同。这里可以做一些基本的验证和提交。编辑第3页也是如此,这里不用太啰嗦。

手机所需模块名称。

个人信息模块,直接循环出。

加载时,我们要求必需和可选数据:

必填组必填中文信息

不需要的中文信息组主题选择

必填字段输入所需的英文信息

不需要的英语信息集合主题选择

//请求名片对应的公司中文信息的属性组数据,必选

//所选项变量以no开头

request . getofflinecardinfogroupfields(userid,cardid,功能(res) {

//调试器

var username=res . card . username;

var mobile=res . card . mobile;

var required group=res . required groupch;

var notrequired group=res . notrequired groupch;

var required groupen=res . required groupen;

var notrequired groupen=res . notrequired groupen;

var req len=required group . fields . length;

var nreqlen=notrequired group . field . length;

var req lenen=required groupen . fields . length;

var nreqlenen=notrequired groupen . fields . length;

self.setdata({

用户名:用户名,mobile: mobile,required field 3360 required group . field,notrequired field 3360 notrequired group . field,required field sen : required groupen . field,notrequired field sen : notrequired groupen . field,l1: reqlen,l2: nreqlen reqlen,l3: reqlenen nreqlen reqlen

});

self.forceupdate

},函数(代码,msg) {

console . info(' code=' code ' msg=' msg ');

});

以上是如何生成小程序店的名片。看完了就学会了吗?通过以上步骤生成小程序店的名片,就可以制作自己的小程序店名片了。想了解更多小程序,请关注源代理网的小程序频道。

这是第一段的结尾。下面是如何生成比较后加一个小程序店的名片。目前已经获得了488网友的青睐!正文到此结束

查看全文

猜你喜欢

微商怎么找货源

频道查询入口

微商代理怎么做