微信小程序开发常用功能点与使用方法总结

在这里,我主要整理了一些小程序开发过程中常用的功能点,非常实用,下面来一看看看吧

1、获取高度宽度

var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth

2、动态绑定 style 样式 和class

class="operBtn {{select==1?'activeClass':''}}"
style="display:{{displayPhoto}}"

3、wx:if

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

4、点击事件

<van-tag plain style="margin-left:10px;" bindtap="toggle">全选</van-tag>
//冒泡事件catchtap做点击事件
 <van-button class="shop-but" size="mini" icon="like-o" catchtap="getWish" data-pro_id='{{item.product_id}}'></van-button>

//获取点击数据
let id = e.currentTarget.dataset.id

5、wx:for

//在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
//默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

//或者
//使用 wx:for-item 可以指定数组当前元素的变量名,
//使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

6、data里面的数据

//存储
this.setData({
        result: event.detail
      });
 //使用
 this.data.result

7、修改页面配置。可以下拉刷新;修改页面标题

"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTitleText": "我的发票",
"navigationBarTextStyle": "white"

8、动态修改页面标题

wx.setNavigationBarTitle({
     title: this.data.info.name
})

9.横线

<van-divider custom-style="margin:10px 0;" />

10、WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

//时间格式化
<wxs module="format">
    var format = function(date) {
        var date = getDate(date)
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        var weekDay = date.getDay()
        var week = ''
        switch(weekDay){
            case 0:
                week = '周日'
                break;
            case 1:
                week = '周一'
                break;
            case 2:
                week = '周二'
                break;
            case 3:
                week = '周三'
                break;
            case 4:
                week = '周四'
                break;
            case 5:
                week = '周五'
                break;
            case 6:
                week = '周六'
                break;
        }
        return month + '月' + day + '日' +' ' + week;
    }
module.exports.format = format;
</wxs>

//手机邮箱打星号
<wxs module="phone">
var toHide = function(array) {
  var mphone = array.substring(0, 3) + '****' + array.substring(7);
  return mphone;
}
module.exports.toHide = toHide;
</wxs>

11、video,属性用法
<

video
      id="myVideo"
      src="{{url}}"
      binderror="videoErrorCallback"
      show-center-play-btn='{{false}}'
      show-play-btn="{{true}}"
      controls
      title="课程"
      object-fit="fill"
      enable-auto-rotation="true"
      bindtimeupdate="bindtimeupdate"
    ></video>
//

 let videoCtx = wx.createVideoContext('myVideo', this)
videoCtx.pause()

//bindtimeupdate  获取进度时间,根据时间来进行限制播放操作
bindtimeupdate:function(res){//播放中函数,查看当前播放时间等
        let video_status = this.data.video_status
        let that = this
        if (res.detail.currentTime > 10) {
            if (video_status === '0') {
                wx.showModal({
                    title: '登录',
                    content: '试听课程结束,如需继续查看,请先登录',confirmText:'确定',
                    success (res) {
                      if (res.confirm) {
                        wx.switchTab({
                            url: '/pages/user/user'
                        })
                      } else if (res.cancel) {
                        wx.navigateBack({
                          delta: 1,
                        })
                      }
                    }
                })
            } else if (video_status === '2'){
                let videoCtx = wx.createVideoContext('myVideo', this)
                videoCtx.pause()
                wx.showModal({
                    title: '购买课程',
                    content: '试听课程结束,如需继续查看,请先购买',confirmText:'立即支付',
                    success (res) {
                    if (res.confirm) {
                        that.onClickButton()
                    } else if (res.cancel) {
                        wx.navigateBack({
                        delta: 1,
                        })
                    }
                    }
                })
            }

        } else {

        }
    },

12、数据的存储

//存
try {
          wx.setStorageSync('car', info)
        } catch (e) { }
//获取
try {
      var value = wx.getStorageSync('car')
      if (value) {
        this.setData({
          ApplyContent:value
        })
      }
    } catch (e) {
    }

13、地图使用

//官网
const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
    key: 'XSTBZ-G74CJ-7BVFQ-KC2JD-ONRK5-ZABGU'
})

getAddressLocation(){
        let that = this
        wx.getLocation({
        type: 'gcj02',
        success (res) {
            const latitude = res.latitude
            const longitude = res.longitude
            that.getAddress(latitude, longitude)

        }
        })
    },
    getAddress(latitude, longitude) {
        let that = this
        qqmapsdk.reverseGeocoder({
            location: {latitude,longitude},
            success(res) {
                console.log(res);
                var mks = []
                mks.push({ // 获取返回结果,放到mks数组中
                    title: res.result.address,
                    id: 1,
                    latitude: latitude,
                    longitude: longitude,
                    iconPath: "../../img/mk.png", //图标路径
                    width: 20,
                    height: 20
                })
                that.setData({
                    address:res.result.address,
                    markers: mks,
                    latitude: latitude,
                    longitude: longitude,
                })
            }
        })
    },

14、点击复制

copyBtn: function (e) {
        var currentidx = e.currentTarget.dataset.num;
        console.log(currentidx);
        wx.setClipboardData({
        data: currentidx,
        success: function (res) {
            wx.showToast({
            title: '复制成功',
            });
        }
        });
    },

总结

到此这篇关于微信小程序开发常用功能点与使用方法的文章就介绍到这了,更多相关微信小程序开发常用功能点内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-10-11

微信小程序开发的四十个技术窍门总结(推荐)

前言 微信"小程序"正式上线一周时间,相关话题持续升温.支付宝开发"小程序"的消息也随即曝出,互联网巨头们摩拳擦掌,不少网友调侃说,这势头感觉要挑战现有的"APP帝国"了.那么,面对如此炙手可热的小程序,WeX5移动开发云也没有闲着,经过全网搜索,为大家筛选出一条小程序开发者的必读文章,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考! Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一

微信小程序开发之入门实例教程篇

前言 近日,在工作闲暇之余,阅读了一些关于微信小程序的文章,忍不住,想动手试他一试.本文就以"我的第一个微信小程序"为例,简单的介绍下,微信小程序的入门级用法. 一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序开发与管理->配置服务器中,点击"开发者设置". 3.会获得一个AppID,记录AppID,后面创建项

详解微信小程序开发(项目从零开始)

一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好).好了废话不多说,看目录. 注: 小程序是一套特殊的东西,融合了原生和web端.他是一个不完整的浏览器对象,所以很多DOM . BOM 的东西无法使用,但是他又通过微信APP实现了多线程. 二.如何创建小程序 很简单,首先下载微信开发者工具,下载稳定版本的就好. 下载 然后,创建小程序,可以参考下述图

微信小程序云开发详细教程

微信小程序云开发之初体验,供大家参考,具体内容如下 小程序云开发是微信最近推出的新的一项能力,它弱化了后端以及运维的概念,开发者无需搭建服务器,使用微信平台提供的api即可完成核心的业务开发. 目前提供三大基础能力支持: 云函数:在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码 数据库:既可在小程序前端操作,也能在云函数中读写的 JSON 数据库,免费2G容量 存储:可在小程序前端上传/下载云端文件,在云开发控制台可视化管理,免费5G容量 上手体验 打开微信开发者工具,新建

微信小程序 开发工具快捷键整理

微信小程序 微信开发者工具 快捷键,最近学习研究微信小程序,用了不少快捷键,索性记录下来,后续如果有其它的快捷键继续增加, 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, C

微信小程序开发入门基础教程

微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

使用微信小程序开发前端【快速入门】

前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好

微信小程序开发经验总结(推荐)

一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.dataset; wx.navi

微信小程序 开发经验整理

微信小程序 开发经验整理 前言: 最近小程序出来了,公司也要求我们开发一款小程序. 于是,就开始着手做了,做了差不多一周吧,也遇到了很多问题,这里就来总结一下.(主要是从一个Android开发者的角度来述说的,可能比较零碎的一些知识点和经验,如果大家还有补充,欢迎) 总结 1:传参,方法判断 js中 方法中可以传递一个方法作为形参,在java中是不可以的.比如start项目中的 getUserInfo:function(cb){ var that = this if(this.globalDat

手把手教你写一个微信小程序(推荐)

需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

微信小程序的线程架构【推荐】

小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻辑文件 page页面最多由4个文件构成: page.jason 页面配置 page.wxml 页面结构 page.wxss 页面样式 page.js 页面主体逻辑 app.js和page.js中包含小程序在生命周期的每个阶段相应的事件. 典型的app.js代码结构如下: App({ onLaunch

微信小程序地图导航功能实现完整源代码附效果图(推荐)

正文: 一:需求及效果图展示 从后端API获取到起始地和目的地的经纬度坐标与地名.用户点击起始地便打开地图展示坐标的附近街景,路线,或者打开外部地图. 二:源代码 <block wx:for="{{data_2}}" wx:key='index' wx:if="{{data_2.length}}"> <view style='margin-left:10rpx;'>订单号: {{item.order_num}}</view> &l

微信小程序实现跳转的几种方式总结(推荐)

今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景) <!-- sample.wxml --> <view class="btn-area"> <navigator url="../my/my">跳转到新页面</navigator> </view> 参数如下 2.给页面布局加监听bindtap事件,然后在方法里面,通过wx.navigatorTo来实现

微信小程序js文件改变参数并在视图上及时更新【推荐】

用过VUE的童鞋都知道,vue在改变data里面参数可以以直接用this.XXX=XXX,并且视图层也会立即更新呈现,但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的 一.简单参数 XX.wxml <view> <text>{{str}}</text> </view> <button bindtap="change">改变</button> XX.js Page({ data: { st

微信小程序批量上传图片到七牛(推荐)

一.引入七牛SDK 具体查看文档 https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md 二.封装上传方法upload.js /** * 上传函数 */ const qiniuUploader = require("qiniuUploader"); const request = require("./request.js") // 初始化七牛相关参数 function initQiniu() {

微信小程序indexOf的替换方法(推荐)

方法:通过wxs定义indexOf方法,在页面中引用并使用 栗子: wxs:命名为str.wxs,导出定义的defineIndexOf方法,命名为indexOf function defineIndexOf(str, val) { return str.indexOf(val); } module.exports = { indexOf: defineIndexOf } wxml: 引用str.wxs,并给模块命名为toolStr,在下面的循环中要用到toolStr里面导出的indexOf方法