微信小程序开发--常用方法

微信小程序开发中常使用到的一些代码片段，总结在这里了，如果大家有补充欢迎！

1.图片等比例显示

<!-- 设置宽，使高等比例显示 -->
<image src="../../images/img8.png" class="list_item_img" mode="heightFix"></image>
<!-- 设置高，使宽等比例显示 -->
<image src="../../images/img8.png" class="list_item_img" mode="widthFix"></image>

2.文字上下滚动（通知公告）

  <!-- 滚动-通知公告 --><view class="gd_kcss"><view class="tz_tip"><image src="../../images/tongzhi.png"></image> 最新<text>通知</text></view><swiper class="swiper_container gd_k " vertical="true" autoplay="true" circular="true" interval="3000"><navigator url="/pages/index/index" open-type="navigate"><swiper-item><view class="swiper_item">1多地首套房贷利率上浮 热点城市渐迎零折扣时代</view></swiper-item></navigator><navigator url="/pages/index/index" open-type="navigate"><swiper-item><view class="swiper_item">2多地首套房贷利率上浮 热点城市渐迎零折扣时代</view></swiper-item></navigator><navigator url="/pages/index/index" open-type="navigate"><swiper-item><view class="swiper_item">3多地首套房贷利率上浮 热点城市渐迎零折扣时代</view></swiper-item></navigator></swiper></view>

/*  滚动-通知公告 */
.gd_kcss{border-radius: 10px;background-color: #ffffff;display: flex;align-items: center;width: 88%;margin: 0 auto;padding: 0 3%;}
.tz_tip{width: 85px!important;font-size: 14px;line-height: 40px; font-style: italic;}
.tz_tip image{width: 16px;height: 16px;vertical-align: middle;}
.tz_tip text{color: #0067f1;}
.gd_k{width: 68%;height: 40px;line-height: 40px;padding: 0px 0;margin: 0 auto;}
.swiper_item{font-size: 14px;width: 100%;margin: 0 auto;display: inline-block; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

3.连接跳转

<navigator url="/pages/listInfo/listInfo" open-type="navigate"><view><text>发布信息列表</text></view>
</navigator>
<navigator url="/pages/listnews/listnews" open-type="navigate"><view><text>资讯信息</text></view>
</navigator>

4.循环语句

<block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log.date}}</text>
</block>

5.接口访问

wx.request({url: 'http://xxxxxx.cn/xxxxx/xxxxxx/search', data: {page_b: 0,page_count: 5},header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res);that.setData({dataLiat: res.data.resultSet,});}
})

6.form表单

<form catchsubmit="formSubmit" catchreset="formReset" class="form-view" bindsubmit="formSubmit"><text class="title">出售商品信息</text><view class="form-section"><view class="form-item"><view class="form-item-title">出售商品名称</view><view class="form-item-input"><input class="weui-input" name="name" placeholder="请填写商品名称" /></view></view><view class="form-item"><view class="form-item-title">出售商品价格</view><view class="form-item-input"><input class="weui-input" name="price" placeholder="请填写商品价格(元/KG)" /></view></view><view class="form-item"><view class="form-item-title">出售商品数量</view><view class="form-item-input"><input class="weui-input" name="goods_num" placeholder="请填写商品数量(KG)" /></view></view></view><!--  --><view class="btn-area"><button class="tj_button" type="primary" formType="submit">发布</button></view></form>

表单校验以及提交数据

Page({// 初始化表单校验initValidate(){// 创建实例对象this.validate = new WxValidate({name: {required: true},price: {required: true,number: true},goods_num: {required: true,number: true}}, {name: {required: '请输入商品名称!'},price: {required: '请填写商品价格(元/KG)!',number:'商品价格请填写数字！'},goods_num: {required: '请填写商品数量(KG)!',number:'商品数量请填写数字！'}})},data: {},onLoad: function (options) {this.initValidate()},// 表单提交formSubmit: function (e) {// console.log('form发生了submit事件，携带数据为：', e.detail.value);// 校验表单if (!this.validate.checkForm(e.detail.value)){const error = this.validate.errorList[0];wx.showToast({title: `${error.msg} `,icon: 'none'})return false}console.log('form携带数据为：', e.detail.value);// 接口提交数据},})

7.上传图片

<text class="title">上传商品缩略图</text><view class="view_img"><view wx:if="{{cover_pic == '' ? false : true}}" class="view_img_lishow" bindtap="uploadimg"><image src="{{cover_pic}}"></image><!-- <view class='delete' bindtap='deleteImgdd' data-index="{{index}}"><image src="../../images/icon_close.png"></image></view> --></view><view wx:if="{{cover_pic == '' ? true : false}}" class="view_img_li" bindtap="uploadimg"><image src="../../images/bg_bgimg.jpg"></image><text class="view_img_litxt">上传缩略图</text></view><text class="ttip">限上传一张</text><input hidden="true" type="text" name="cover_pic" value="{{cover_pic}}"/></view>

上传到服务器

// 单张图片上传uploadimg(){var _this = this;wx.chooseImage({ //选取图片count: 1,sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success (res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths[0];_this.setData({cover_pic: tempFilePaths,});// 上传图片到服务器--接口// _this.uploadImgFun(tempFilePaths); }})},//上传图片到服务器uploadImgFun(tempFilePaths){wx.uploadFile({url: 'http://xxxxxxxx:8090/image',  //请求后台的路径filePath: tempFilePaths,  //小程序本地的路径name: 'images', //后台获取我们图片的key// formData: {//额外的参数formData//     'id': 'test',//     a:{ abc:'111'},//     b:[1,2,3]// },success: function (res) { //上传成功console.log(res);  console.log('上传成功')},fail: function (res) {console.log(res)},})},// 删除图片(单图上传)deleteImgdd: function (e) {var that = thiswx.showModal({title: "提示",content: "是否删除",success: function (res) {if (res.confirm) {that.setData({cover_pic: ''})// console.log(that.data.cover_pic);} else if (res.cancel) {console.log("用户点击取消")}}})},

微信小程序开发--常用方法相关推荐

微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...
关于微信小程序开发中遇到的缺少game.json问题的解决
关于微信小程序开发中遇到的缺少game.json问题的解决参考文章: (1)关于微信小程序开发中遇到的缺少game.json问题的解决 (2)https://www.cnblogs.com/ygxd ...
微信小程序开发系列一：微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

微信小程序开发--常用方法

微信小程序开发--常用方法相关推荐

最新文章

热门文章