首页 > 微信 > 详细

微信小程序(基础)

时间:2019-08-17 13:16:54      阅读:145      评论:0      收藏:0      [点我收藏+]

 

 

文档官网:https://developers.weixin.qq.com/miniprogram

https://developers.weixin.qq.com/miniprogram/dev/framework/

https://mp.weixin.qq.com/

https://www.leiphone.com/

http://test.dscmall.cn/

https://www.iconfont.cn/

 

命名规则:驼峰命名

导航标题字体颜色:只有黑色和白色两种

小程序没有wxml和wxss可以做的

小程序里面的标签很少,view,image,text,block(没有任何作用,可以做一些循环和语法,不添加内容),超链接

中括号:数组

大括号:对象

view标签类似于div

单位rpx,200rpx=100px

text文本标签类似于span、p、h1-h6等标签

image图片标签,用来插入图片。

超链接标签:<navigator href=”” open-type=”switchTab”>超链接</navigator>

(如果在全局变量中定义了tabBar之后超链接就要用open-type=”switchTab”清除一下样式)

block标签不会在页面中渲染,只接受控制属性,类似于for循环之类的 

技术分享图片

自定义属性数组:

 

js

技术分享图片

wx:for-tem=””  wx:for-index=”key”

 

wxml:

            技术分享图片

数组对象js:

                       技术分享图片

                  

wxml:

                技术分享图片

属性绑定:我们自己定义的属性必须价格前缀-

data-aid=”{{}}”

js:

              技术分享图片

wxml:

              技术分享图片

二级数组:wxml:

               技术分享图片

          js:

              技术分享图片

单击事件:

          按钮:

                  技术分享图片

size=”mini”  //定义按钮的大小

          type=”warn” //定义按钮背景色为红色

          plain=”true” //定义按钮是否镂空

          disabled=“true”//定义按钮是否禁用

          loading=“loading” //按钮等待

          bindtap=”fn”      //绑定的函数名

      函数fn:

                技术分享图片

                wxml:

                  技术分享图片

 

getMsg:

             js:

              data:

                     技术分享图片

                     技术分享图片

              wxml:

                     技术分享图片

               

         setMsg:

                    js:

                         技术分享图片

                      wxml:

                      技术分享图片

 

冒泡机制:

事件冒泡:当一个节点接收到一个事件,会逐层向外传递,直到最顶层位置,这种触发机制成为冒泡机制

阻止事件冒泡:catchtap:

                            技术分享图片

跳转函数:js:

技术分享图片

wxml:

技术分享图片

 

 

 

                         wxml内容:                          js值

轮播图: 滑动组件:标签<swiper></swiper>

         indicator-dots=”{{indicatorDots}}”     //下边出现指示点    true

         autoplay=”{{autoplay}}”            //是否自动播放      true

         interval=”{{interval}}”             //轮播时间间隔      时间

        circular=“{{circular}}”           //是否衔接播放       true

        duration=”{{duration}}”          //翻页的播放时长      时间

        indicator-active-color =“#f00”  //指示点的颜色     

        技术分享图片

         技术分享图片

 

转接电话功能

技术分享图片

tel(){

   wx.makePhoneCall({

      phoneNumber:’1654646465’,

})

}

技术分享图片

滑动容器:

          white-space:nowrap;//设置如何处理元素的空白,设置元素不换行

        图标:<icon type=”success” size=”40-70” color=””></icon>

            type=”success” //设置图标样式

            size=”40-70”  //设置图标大小

            color=””     //设置图标颜色

            值:

           技术分享图片

          技术分享图片

 

地图:

        longitude=””       //经度

        latitude=””       //纬度

        scale=””         //地图缩放比例

 js:定义定位图标的位置和大小:

    技术分享图片

       

  clickable:true   //触发事件

        title:’’       //标题

        rotate:      //旋转   定义自己所在的位置:

          技术分享图片

          

 callout:{

           content:””   //添加内容

           color:””   //

           fontsize:”” 

           borderRadius:””

           borderWidth:””

           }

     设置区域的文本描述:

技术分享图片

   js: 定义起始路线:ploylines:[{

               points:[{

                      longitude:””

                      latitude:””

                      },

                      {

                       longitude:””,,

                       latitude:””},

                      {

                      longitude:””

                      latitude:””}

}]                               

}]

      wxml:

技术分享图片

导入音频:audio

poster=“{{poster}}”   //定义封面图片

name=“{{name}}”    //歌名

author=“{{author}}”  //定义歌手名

src=”{{}}”

 

设置摄像功能:camera

device-position=”back”   //后置摄像头  front-前置

flash=”off”            //关闭闪光灯   on打开

js:设置拍照函数

技术分享图片

quality:””;   //设置相机像素的质量

success:(res)=>{this.setData({src.res.tempImagePath})}   //照片文件的临时路径

wxml:

技术分享图片

录制视频:

          js: start函数:

          技术分享图片

         stop函数:

            技术分享图片

                wxml:

           技术分享图片

 

微信小程序(基础)

原文:https://www.cnblogs.com/maleijiejie/p/11367852.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!