【微信小程序】运用官方网部件迅速构建留言板

模拟题目:【手机微信微信小程序】应用官方网网构件快速搭建留言板留言板留言板留言板 前言:手机微信微信小程序越来越越就越好用了,那么秉着功能强大和快速新手入门的目的;

原题目:【微信小程序】运用官方网部件迅速构建留言板留言板

序言:微信小程序越来越越好用了,那麼秉着好用和迅速入门的目地;我们就关键讲一下,怎样迅速的构建一个中小型的留言板留言板,而且和后端开发开展互动。

最先了解文件目录构造

app.js 微信小程序逻辑性

app.json 微信小程序公共性配备

app.wxss 微信小程序公共性款式表

project.config.json 微信小程序新项目配备

sitemap.json map数据库索引文档

pages 网页页面文档夹

index 主页

index.wxml 向客户展现的网页页面

index.js 网页页面关键逻辑性

index.wxss 当今网页页面款式

index.json 当今网页页面配备

utils 专用工具包文档夹

utils.js 专用工具包

详细说明app.json

{

//关键关键,假如有在建了网页页面,务必在这里加上上

"pages":[

"pages/index/index",

"pages/logs/logs",

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

},

"style": "v2",

"sitemapLocation": "sitemap.json"

}

详细说明app.js

globalData: {

userInfo: null

}

关键用以全局性储存应用,例如客户信息内容,必须各种各样网页页面都应用到的数据信息

刚开始第一步,查询官方网文本文档

浏览:https://developers.weixin.qq/miniprogram/dev/component/input.html

运用官方网提醒的横着和竖向合理布局成以下样例

编码,大家以便快让大伙儿掌握怎样构建网页页面,立即把index.wxml改动以下

!--index.wxml--

view

view

view

view

text 留言板留言板 /text

/view

view

view

view

view

button wx:if="{{!hasUserInfo canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" 获得头像呢称 /button

block wx:else

image bindtap="bindViewTap" src="{{userInfo.avatarUrl}}" mode="cover" /image

text {{userInfo.nickName}} /text

/block

/view

/view

/view

/view

/view

/view

view

view

view

view

view

view 电子邮箱 /view

view

view

input auto-focus value="{{email}}" bindinput="bindInput" data-name="email" placeholder="请键入电子邮箱" /

/view

/view

/view

/view

view

view

view 內容 /view

view

view

textarea placeholder="请填好您的建议" value="{{content}}" bindinput="bindInput" data-name="content" placeholder- /

/view

/view

/view

/view

view

view

view

button type="primary" size="mini" bindtap="submit" 递交 /button

button type="warn" size="mini" bindtap="rest" 重设 /button

/view

/view

/view

/view

/view

/view

/view

款式,index.wxss,默认设置input全是无垠框等,大家再加外框

/**index.wxss**/

.container{

padding: 10rpx;

display: block;

}

input {

border: 1px solid rgb(44, 36, 44);

}

textarea {

border: 1px solid rgb(44, 36, 44);

}

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

}

.usermotto {

margin-top: 200px;

}

关联数据信息,及动态性设定数据信息

这一就必较关键了,大家做随后全是必须数据信息互动的,因此请细心看怎样设定

最先在index.js,寻找data主要参数,并新加2个email和content主要参数

data: {

motto: 'Hello World',

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse('button.open-type.getUserInfo'),

//增加

email: "",

content: "",

},

index.wxml中的input应用: value="{{email}}"

input auto-focus value="{{email}}" bindinput="bindInput" data-name="email" placeholder="请键入电子邮箱" /

上边是载入,接下去便是设定数据信息

//根据 bindinput="bindInput" 双引号为自定涵数

bindInput:function(e){

var tempJson = {}

tempJson[e.currentTarget.dataset.name]=e.detail.value

this.setData(tempJson)

},

//之上编码应写在index.js中

之上照片就是我们对于获得客户键入的情况下目标下的数据信息构造详细介绍,根据照片能看到“e”都包括了这些內容。
关键留意 e.detail.value,e.currentTarget.dataset

e.detail.value 是客户键入的值

e.currentTarget.dataset 就是指大家在input标识上设定的标识,根据data-xxxx="xxx" 来设定

大家为何那样写,关键是由于假如有10个input大家不是是要写10个js关联方式?

因此以便通用性计划方案大家就根据标识动态性设定数据信息,做到一个方式适配全部客户键入。
控制企业网站建设

重设

index.wxml

button type="primary" size="mini" bindtap="submit" 递交 /button

button type="warn" size="mini" bindtap="rest" 重设 /button

留意bindtap ,这一涵数便是监管客户点一下的恶性事件

index.js 加上rest涵数

rest: function () {

// that = this ,是由于js中应用了许多回调函数涵数,造成this偏向并不是根,只是当今的目标

// 以便应用根的this目标,就必须根据临时性自变量来处理掉功效域的难题

var that = this

wx.showModal({

title: "提醒",

content: "是不是清除",

success(res) {

if (res.confirm) {

that.setData({

email: "",

content: "",

})

} else if (res.cancel) {

console.log('客户点一下撤销')

}

}

})

},

点一下 重设 实际效果以下:

递交

上边早已有bindtap="submit"

大家关键看index.js submit方式

submit: function () {

var that = this

wx.showLoading({

title: '递交中...',

})

setTimeout(function () {

wx.hideLoading()

}, 2000)

wx.request({

url: 'https://xx/test.php', //仅为实例,并不是真正的插口详细地址

data: {

email: that.data.email,

content: that.data.content

},

header: {

'content-type': 'application/json' // 默认设置值

},

success(res) {

console.log(res.data)

}

})

},

//之上便是一个大家平时和后端开发开展互动的一个恳求,假如大伙儿会jquery的ajax递交,这一一看就搞清楚

提醒:url 务必是https,也务必在相匹配的网页页面端设定网站域名

假如填好歪斜确点一下递交的情况下便会提醒:

小结

微信小程序发展趋势到如今实际上开发设计早已较为完善了,因此大伙儿能够高兴的去做好自己的微信小程序吧。下手起來依照之上內容能够迅速的掌握到3D渲染,关联,与服务端互动,封裝方式等便捷开发设计。

手机微信微信小程序事后

回到凡科,查询大量

义务编写:

  • 手机微信微信小程序发布

    服务供应商的手机微信微信小程序审核“加速体系”早就公布了2个月了,许多服务供应商早就尝到审核加速的“幸福快乐开心”。但一般开发设计设计方案者要临时性性公布、遇到突发

  • 中澳社腾迅发布“云聚中

    2020年中秋节节来临之时,在我国新闻报道报导社与腾讯公司在九月份28日携手并肩并肩公布“云聚中秋节节”手机上手机微信手机微信微信小程序,向在我国我国和包括海外出国留学出

  • 微信小程序开发设计是多

    模拟题目:手机微信微信小程序开发设计设计方案多少钱钱合适 手机微信微信小程序多少钱钱,这一难点,就如一辆小汽车多少钱钱一样。 那类即将毁损的破吐司吐司面包车,最划得来

  • 小程序来了,原生 App 还有

    (最少先在国) 手机微信的渗入率将会比单一实际操作系统软件高(iOS 手机微信+Android 手机微信 > iOS,iOS 手机微信+Android 手机微信 > Android,猜想,沒有历经资格证书),并且店铺的互

  • 如何才可以搞好微信小程

    客户在手机端的检索有三个需求:迅速、更准、更优。无论是服务直通、作用直通、還是知名品牌经典店,设计方案的目地都以这三个因素为关键。 服务直通,让客户“迅速”得到服务