企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
在做小程序的时候,有时候会因为文档看的不仔细,或者其他原因,总会有一些小错误,因此记录下来。 **1.关于FORM表单** ~~~ <form bindsubmit="formSubmit"> <button formType="submit">提交</button> </form> ~~~ 表单一定要设置一个绑定函数,即 bindsubmit的属性值 formSubmit 另外一定要设置一个button,并且属性key=”value”是固定的 formType="submit" js端 formSubmit: function(e){ console.log(e); } 下图事件的细节获取name值写错了, 应该是 e.detail.value.mobile e为建立这个提交函数的时候传入的对象,可以为任意字母,一般为e或者event 可以用 e.detail.value.XXX.length 来获取当前输入框的长度 使用e.detail.value就可以把e.detail.value.XXX 系列所有的值获取到 currentTarget和target类似于当前结点和祖先结点的关系 表单POST和GET提交是有区别的 分别要设置method,并且字符串为大写 另外不同方式执行的header头也不一样 ~~~ method: "POST", header: { "Content-Type": "application/x-www-form-urlencoded"}, method: 'GET', header: {'Accept': 'application/json'}, ~~~ data:{},是需要请求时候发送到服务器端的json数据 wx.request提交的url 要是https,他的success和fail回调函数不是操作成功的回调函数,而是三次握手返回的success或者fail. 服务器端返回的数据要是JSON形式 success: function(res) {} 返回值以形参是形式存在,类似于ajax成功的返回值 一般在调用函数以后,都使用var that = this;因为如果有时候如果调用多个函数this会指向错乱。好像JQUERY源码里有这样的用法。 **2.提示** ~~~ wx.showToast 类似于alert wx.hideToast 隐藏弹出框 不知道有什么用。。 wx.showModel 类似于confirm 根据操作返回true或者false wx.showModal({ title: '提示', content: '这是一个模态弹窗', success: function(res) { if (res.confirm) { //点击确定以后执行的操作 console.log('用户点击确定') }else{ //点击取消执行的操作 } } }) ~~~ wx.showActionSheet(){}弹出一个类似于select option框一样的列表,最多6个返回索引 0开始 个人觉得这些提示框经常结合setTimeout函数执行,而不是本身的success:function,如果根据官方提供的调用成功以后执行的方法,提示框会在调用的一瞬间就执行成功或者失败函数,根本来不及看清提示 setTimeout(function(){ //action 在提示框结束以后,执行你想执行的动作 },1000) ### **3.跳转** wx.navigateTo,是保留当前页面,调到应用内某个页面,使用wx.navigateBack可以返回 类似于在当前页面上加一层float层,遮住当前页面 而wx.redirectTo是关闭当前页面,调到应用内某个页面 不可以返回 上面两者可以带参数 应用的页面就是app.json里注册过的页面,否则报错navigateTo:fail url not in app.json 并且上面两个跳转函数都是不可以调到tabBar页面的,tabBar是在app.json里 tabBar的list里的列表页 <navigator url="../untitled/untitled" >返回首页</navigator> //跳转到除tabBar页面之外的页面一点需要注意一下,不让就会被坑的 wx.switchTab 调到tabBar页面,并且关掉所有其他非tabBar页面,不能携带参数 wx.navigateBack 返回上X层页面,默认是1 ### **4.关于传递参数** 静态数据: 在页面初始化的时候,data这个json数据,是页面静态数据,可以在模板中直接引用, ~~~ Page({ data:{ test:'hello world', arrayInfo:[{ info1:'first', info2:'second', }] } }) 在模板页中,通过{{test}}和{{arrayInfo.info1}}、{{arrayInfo.info2}}可以引入数据 ~~~ 动态数据: 可以通过事件的触发,动态设置数据 ~~~ this.setData(){ "information":"dynamic data", } ~~~ 可以通过wx:for循环输出数据,类似于foreach,它绑定一个数组,默认当前下标变量名为index,数组当前项的默认名为item 可以使用 wx:for-item 和wx:for-index指定变量名 现在如果单独使用wx:for会有一个warning级错误,可以和wx:key消灭错误提示 wx:for="{{userListInfo}}" wx:key="item" ### **5.事件** 在模板页中,事件绑定有balabala一堆,但是我目前只有bindtap,类似于click 比如 `<view class="consignee-action" data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view>` 这里这个view绑定的就是deleteClick这个事件,点击的时候会在JS中找到同名函数进行事件处理。 data-deleteid是一个dataset的属性,JS可以通过这个查找到data-*对应的值。进行与服务器端的交互.以data-开头,多个单词用-链接,不能有大写. 通过传入的event,可以通过event.currentTarget.dataset.XXX来获取在模板页设置的时候这个data-XXX的值 ### **6.全局变量** 在app.js中定义的数据或者函数都是全局的,但是函数是没有必要放在全局里 ~~~ //app.js App({ globalData:{ userInfo:null, servsers:'https://shop.com' } }) ~~~ 在页面中getApp().globalData.servsers就可以获取到设置的全局变量的值 ### **7.函数的复用** ~~~ test.js test: function(){ } module.exports={ test:test } other.js var common = require('test.js'); page({   common.test() }) ~~~