微信小程序常用代码段

原创 2018年04月16日 16:41:16

添加转发功能

在.js的page中添加
onShareAppMessage:function(){
    return{
      title:'创收生活',
      path:'pages/index/index'
    }
  },

点击事件处理

在.wxml中设置组件
    <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
        <text class="usertext" bindtap='click'>{{text}}</text>
      </view>
    使用bindtap绑定js处理函数
在.js中进行函数处理
    在page中添加
        click:function(){
            console.log("click")
          },
    会在控制台输出click字符串

点击按钮修改页面内容

首先使用data定义wxml中变量内容
然后定义一个按钮
    <button bindtap='changetext'>senddata</button>
在js中实现该函数
    changetext:function(){
        this.setData({
          text:"text changed"
        })
      },
通过this.setData函数可以修改data中相应key的value值,在显示界面显示该key的组件的内容也会变化

变量作用域、文件作用域

在一个.js中声明的变量和函数只在当前页面下有效
不过在app.js中的APP的globalData数据为全局数据

获取用户信息

console.log(this.globalData.userInfo)只能获取用户昵称,用户设置的国家和性别

WXML的数据绑定是什么意思

在wxml文件中使用{{}}定义一个变量
可以在.js的data中设置key和value值,在{{}}中和key一样的值将会获得该key的value值

警告Now you can provide attr “wx:key” for a “wx:for” to improve performance

<view wx:for-item="item" wx:for="{{array}}" wx:key="id"> {{item}} </view>这样无警告
<view wx:for-item="item" wx:for="{{array}}"> {{item}} </view>这样有警告
微信的意思是如果你的列表不是静态的最好给每一个元素即item添加一个唯一的id或者说唯一的字符串或数字,而且最好不要动态改变

条件渲染

根据不同的条件决定是否渲染出现该组件
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
可以在.js中使用setData改变key的值,wxml文件中的界面也会跟着key的改变而改变

获取点击事件的详细信息

可以获取组件中使用data-设置的信息
<button id="tap" data-hidden='jjjjj' data-k="kkkkk" bindtap='tapname'>senddata</button>
在.js文件中添加定义的函数
tapname: function (event){
    console.log(event)
  },
在控制台中会显示
{type: "tap", timeStamp: 2973, target: {…}, currentTarget: {…}, detail: {…}, …}
changedTouches
:
[{…}]
currentTarget
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
detail
:
{x: 156, y: 673.6000366210938}
target
:
{id: "tap", offsetLeft: 106, offsetTop: 650, dataset: {…}}
打印出的event信息属性
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件绑定

在上面事件绑定使用的是bindtap加函数名,由bind和事件类型tap组成
事件绑定的写法为key="value",value即函数名

微信的wxs

类似jsp页面的写法,即在html中添加java代码,而wxs则是在wxml中添加一套脚本语言,这个语言不同于javascript

不同页面设置不同的标题
在不同的页面目录下,新建页面名称.json文件,添加navigationBarTitleText属性
{
“navigationBarTitleText”: “首页”
}

文字方框显示格式

在.wxss中添加
    .result {
      overflow-x: scroll;
      margin: 10px;
      padding: 10px;
      font-size: 14px;
      border-radius: 5px;
      border: 1px solid #DDD;
    }
在.wxml中使用
    <view  class='result'>
      <text space="nbsp">jjjjjjjjjjjjjj</text>
    </view>

使用按钮的方式跳转界面

在.wxml界面设置按钮
     <button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
            disabled="{{disabled}}" bindtap="setdefault" hover-class="other-button-hover">首页 </button>
     <button type="primary" size="{{defaultSize}}" loading="{{loading}}" plain="{{true}}"
            disabled="{{disabled}}" bindtap="settext" hover-class="other-button-hover">text1 </button>
在.js文件中进行处理
      setdefault:function(){
        wx.navigateTo({
          url: '../first/first'
        })
      },
      settext:function(){
        wx.navigateTo({
          url: '../text1/text1'
        })
      },

选取本地照片显示在image中

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{mode}}" src="{{src}}" bindtap='imgtap'></image>

  setimg:function(){
    var _this =this
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        _this.setData({
          src: tempFilePaths
        })
        //this.src=tempFilePaths

      }
    })
  },

点击图片弹出消息提示框

  imgtap:function(){
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  },

点击图片弹出loading提示框,指定时间后隐藏

  imgtap:function(){
    wx.showLoading({
      title: '加载中',
    })

    setTimeout(function () {
      wx.hideLoading()
    }, 2000)
  },

点击图片弹出模态弹窗可以点击确定或取消

  imgtap:function(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

调用扫码功能

 <button type="default" size="mini" bindtap="setcode">扫码 </button>
  setcode:function(){
    wx.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        console.log(res)
      }
    })
  },

radio-group修改大小,radio修改大小

.radio{
    zoom:0.5;

    text-align: center;
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/superce/article/details/79962683

软件工程杂志《非程序员》第一期

软件工程杂志《非程序员》第一期名    称: 《非程序员》第一期设    计: UMLCHINA编    者: UMLCHINA联系邮件: think@umlchina.com 版    本: 第一期...
  • dbbdggdbbdgg
  • dbbdggdbbdgg
  • 2001-05-27 12:05:00
  • 729

微信小程序----常用组件

微信小程序常用控件view 微信小程序常用控件scroll-view 微信小程序常用控件swiper 微信小程序常用控件icon text progress 源码下载:...
  • zhaihaohao1
  • zhaihaohao1
  • 2017-08-27 12:13:19
  • 171

微信小程序常用地址

微信小程序API 地址:[https://mp.weixin.qq.com/debug/wxadoc/dev/api/]微信小程序开发者资源:[https://github.com/tencentyu...
  • Cpath
  • Cpath
  • 2017-12-14 10:23:52
  • 458

微信小程序 常用组件

微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 这里介绍一点值得记录的例子,...
  • SS_S1gn
  • SS_S1gn
  • 2017-11-18 17:16:02
  • 1410

自己常用的微信小程序的封装函数,开发速度up!up!

1.单提示函数(应用场景只想用户点击确认执行的时候)function showModal(cont,flag,fn){ wx.showModal({ title: '提示', ...
  • qq_33719683
  • qq_33719683
  • 2018-03-19 21:52:58
  • 101

微信小程序开发常用知识点

收集了一些小程序开发中常用到的知识点,记录一下。(小程序开发文档版本不断在更新,可能有些以后用不了的,这些发现了再更新,也请各位道友指正) http://www.jianshu.com/p/df...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-11 19:30:06
  • 754

微信小程序 倒计时组件实现代码

http://www.jb51.net/article/95569.htm
  • mmd1234520
  • mmd1234520
  • 2018-02-02 11:24:07
  • 234

微信小程序开发中常用的功能代码分享

微信小程序开发中常用的功能代码分享,总结出来了常用的代码片段,供大家参考。...
  • u012118993
  • u012118993
  • 2017-03-12 21:37:08
  • 836

IDE常用快捷键——微信小程序

常用快捷键 格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制...
  • maque0312
  • maque0312
  • 2016-12-06 16:00:26
  • 366

微信小程序入门篇(一)

小程序也已经出来有一段时间啦,对于一些想去学习又无从下手的朋友们,欢迎和代码君一起去学习一下小程序!准备工作 下载开发工具:微信小程序开发工具 创建项目 添加项目 如果没有AppID可以选择无AppI...
  • u012927188
  • u012927188
  • 2017-05-22 19:39:04
  • 11753
收藏助手
不良信息举报
您举报文章:微信小程序常用代码段
举报原因:
原因补充:

(最多只允许输入30个字)