小程序如何调取自定义组件中的properties
2019-04-03 15:16:50
如何看待微信公开课小程序热门讨论「小程序如何调取自定义组件中的properties」
摘要:小程序如何调取自定义组件中的properties
展开:写了个自定义组件,用于上传九宫格的图片,但是调用properties出错,显示undefine,我的调用方法是this.properties.uploadUrl.value,但是无法获得值请问,怎么获取properties中的值附源码//entryFormComponent.js//获取小程序的实例constappgetApp()//组件构造器Component({properties:{//上传的路径uploadUrl:{type:String,value:},//服务器端接受文件的keyname:{type:String,value:},},data:{},methods:{//增加图片占位//参数that为组件component的实例_addImagePlaceholder:function(){//varplaceholder[]varplaceholderthis.data.imagesvarimagePlaceholder{index:1,url:static/images/add_img_48px.png}placeholder.push(imagePlaceholder)this.setData({images:placeholder})},chooseImage:function(e){varthatthis//这里的意思是,取当前page对象(component对象)//varuploadUrlthis.properties.uploadUrl.value//获取组件的上传路径//varnamethis.properties.name.value//获取组件上传文件的keyconsole.log(this.properties)//这里是在控件绑定的函数中,调用微信的原生API,所以才会弹出选择图片(微信的原生能力)wx.chooseImage({//微信原生APIwx.chooseImage的回调函数success:function(res){console.log(上传执行了)vartempFilePathsres.tempFilePaths//获取上传文件的临时路径//调用微信原生的上传APIwx.uploadFile({url:http://127.0.0.1:8000/subscribe/upload/,//这个地方硬编码了,不好!//url:uploadUrl,filePath:tempFilePaths[0],name:file,//这是传递给后台的key,在POST的数据中file的key对应的内容//name:name,formData:{/额外传给服务器端的数据也是kv的形式user:test/},//微信原生APIwx.uploadFile的回调函数success:function(res){vardatares.data//dosomethingvarurl_JSON.parse(res.data)varurlurl_.file_url//console.log(res.data)console.log(url_)varindexthat.data.images.length1//当前位置是images数组长度1//varindex0varnewImage{index:index,url:url}//构造一个新的图片实例varimagesthat.data.images//插入图片数组末尾//varimages[]images.pop()//先将图片占位符弹出来images.push(newImage)//再插入新的上传的图片that.setData({//注意不是是this.setData(),在回调函数中应该注意这个问题images:images})//增加一个新的图片占位that._addImagePlaceholder()console.log(images)}})}})},//删除指定Index的图片delImagePlaceholder:function(event){varindexevent.currentTarget.dataset.index//获取当前点击删除的图片的indexvarimagesthis.data.imagesimages.splice(index,1)this.setData({images:this._synIndex(images)//调用index同步,保证删除图片之后images中的index与视图中的一致})console.log(images)},//将this.images中的index与视图层的排序保持一致_synIndex:function(images){//最后一个是图片占位符,index是1,不需要改变其indexvarimagesimagesfor(vari0;iimages.length1;i++){images[i].indexi}returnimages}},})
摘要:小程序如何调取自定义组件中的properties
展开:写了个自定义组件,用于上传九宫格的图片,但是调用properties出错,显示undefine,我的调用方法是this.properties.uploadUrl.value,但是无法获得值请问,怎么获取properties中的值附源码//entryFormComponent.js//获取小程序的实例constappgetApp()//组件构造器Component({properties:{//上传的路径uploadUrl:{type:String,value:},//服务器端接受文件的keyname:{type:String,value:},},data:{},methods:{//增加图片占位//参数that为组件component的实例_addImagePlaceholder:function(){//varplaceholder[]varplaceholderthis.data.imagesvarimagePlaceholder{index:1,url:static/images/add_img_48px.png}placeholder.push(imagePlaceholder)this.setData({images:placeholder})},chooseImage:function(e){varthatthis//这里的意思是,取当前page对象(component对象)//varuploadUrlthis.properties.uploadUrl.value//获取组件的上传路径//varnamethis.properties.name.value//获取组件上传文件的keyconsole.log(this.properties)//这里是在控件绑定的函数中,调用微信的原生API,所以才会弹出选择图片(微信的原生能力)wx.chooseImage({//微信原生APIwx.chooseImage的回调函数success:function(res){console.log(上传执行了)vartempFilePathsres.tempFilePaths//获取上传文件的临时路径//调用微信原生的上传APIwx.uploadFile({url:http://127.0.0.1:8000/subscribe/upload/,//这个地方硬编码了,不好!//url:uploadUrl,filePath:tempFilePaths[0],name:file,//这是传递给后台的key,在POST的数据中file的key对应的内容//name:name,formData:{/额外传给服务器端的数据也是kv的形式user:test/},//微信原生APIwx.uploadFile的回调函数success:function(res){vardatares.data//dosomethingvarurl_JSON.parse(res.data)varurlurl_.file_url//console.log(res.data)console.log(url_)varindexthat.data.images.length1//当前位置是images数组长度1//varindex0varnewImage{index:index,url:url}//构造一个新的图片实例varimagesthat.data.images//插入图片数组末尾//varimages[]images.pop()//先将图片占位符弹出来images.push(newImage)//再插入新的上传的图片that.setData({//注意不是是this.setData(),在回调函数中应该注意这个问题images:images})//增加一个新的图片占位that._addImagePlaceholder()console.log(images)}})}})},//删除指定Index的图片delImagePlaceholder:function(event){varindexevent.currentTarget.dataset.index//获取当前点击删除的图片的indexvarimagesthis.data.imagesimages.splice(index,1)this.setData({images:this._synIndex(images)//调用index同步,保证删除图片之后images中的index与视图中的一致})console.log(images)},//将this.images中的index与视图层的排序保持一致_synIndex:function(images){//最后一个是图片占位符,index是1,不需要改变其indexvarimagesimagesfor(vari0;iimages.length1;i++){images[i].indexi}returnimages}},})
标签:小程序
「小程序如何调取自定义组件中的properties」热门讨论订阅
方法1:微信扫描微信公开课小程序码即可订阅热门讨论「小程序如何调取自定义组件中的properties」
方法2:微信搜索微信公开课小程序名称进入,即可订阅热门讨论「小程序如何调取自定义组件中的properties」
方法3:微信网页访问即速商店,长按识别微信公开课小程序码即可订阅热门讨论「小程序如何调取自定义组件中的properties」
微信公开课小程序热门讨论「小程序如何调取自定义组件中的properties」由微信公开课原创摘录于微信小程序商店shop.jisuapp.cn,转载请注明出处。
微信公开课热门讨论「小程序如何调取自定义组件中的properties」由微信公开课开发者向微信用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。
微信公开课小程序
更新时间:2019-04-03 15:16:50
>
__methodCallerx27;ofundefined
>-404011cloudfunctionexecutionerror
>,请补充选择商家自营-预付卡销售-发行方类目,并在基础信息处申请该类目,通过
>:host在模拟器中显示无效
>:请在小程序服务页面上架正式(非测试)内容或商品后重新提交审核
>.net 微信小程序 上传图片
>'setTimeout'的问题
>‘三朵里熙SPA主题减压空间’为什么搜索关键词‘三朵里‘搜不到
>‘扫普通链接二维码打开小程序‘中设置为体验版,扫码打开是线上版本
>“cloudfunctions**indexjs”gitignore
>“NO ULINK DEVICE FOUND”是怎么回事
>“万马掌上校园”的类目审核
>“上线了”公司开发的微信小程序怎么样?
>“产品是否一定需要条形码”
>