精华内容
下载资源
问答
  • 1、申请微信小程序帐号 进入小程序注册页根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。 登录小程序...

     

    1、申请微信小程序帐号

    进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

    在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

    登录 小程序后台 ,我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。

    小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

    有了小程序帐号之后,我们需要一个工具来开发小程序。

    2、安装开发工具

    前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

    打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

    3、你的第一个小程序

    新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,最后,勾选 "创建 QuickStart 项目" (注意: 你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

    4、小程序代码构成

    1. json 后缀的 JSON 配置文件
    2. wxml 后缀的 WXML 模板文件
    3. wxss 后缀的 WXSS 样式文件
    4. js 后缀的 JS 脚本逻辑文件

    5、小程序配置 app.json

    app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

    6、全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

    属性类型必填描述最低版本
    pagesstring[]页面路径列表 
    windowObject全局的默认窗口表现 
    tabBarObject底部 tab 栏的表现 
    networkTimeoutObject网络超时时间 
    debugboolean是否开启 debug 模式,默认关闭 
    functionalPagesboolean是否启用插件功能页,默认关闭2.1.0
    subpackagesObject[]分包结构配置1.7.3
    workersstringWorker 代码放置的目录1.9.90
    requiredBackgroundModesstring[]需要在后台使用的能力,如「音乐播放」 
    pluginsObject使用到的插件1.9.6
    preloadRuleObject分包预下载规则2.3.0
    resizablebooleaniPad 小程序是否支持屏幕旋转,默认关闭2.3.0
    navigateToMiniProgramAppIdListstring[]需要跳转的小程序列表,详见 wx.navigateToMiniProgram2.4.0
    usingComponentsObject全局自定义组件配置开发者工具 1.02.1810190
    permissionObject小程序接口权限相关设置微信客户端 7.0.0
    sitemapLocationString指明 sitemap.json 的位置

    7、微信小程序开发文档

    微信小程序开发文档

    8、作业

     1、骰子布局,把整个骰子布局做出来到页面上(flex布局)
     2、把小程序(底部导航功能等)完成,能在手机上看或能在开发者工具调试都可以

    1、
    index.html

    <!DOCTYPE html>
    <html>
    <head>
    	<title>骰子布局</title>
    	<meta charset="utf-8">
    	<link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body style="background-color: black;width: 100%;height: 100%">
    <h1 style="color: white;text-align: center;">骰子布局</h1>
    <div style="display: flex ;flex-wrap: wrap;padding:5px">
    	<div class="box1" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box2" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box3" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box4" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box5" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box6" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box7" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box8" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box9" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box10" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box11" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box12" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box13" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box14" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box14dot2"></div>
    	</div>
    	<div class="box15" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box15dot2"></div>
    	</div>
    	<div class="box16" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box16dot2"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" class="box16dot3"></div>
    	</div>
    	<div class="box17" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box18" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div class="box18column">
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		</div>
    		<div class="box18column">
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		</div>
    	</div>
    	<div class="box19" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box20" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    	<div class="box21" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div class="box21row1">
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		</div>
    		<div class="box21row2">
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px" ></div>
    		</div>
    		<div class="box21row3">
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    			<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		</div>
    	</div>
    	<div class="box22" style="background-color: white;height: 100px;width: 100px;border-radius: 10px ;padding: 1px;margin: 10px">
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    		<div style="background-color: black;height: 30px;width: 30px;border-radius: 100%;margin: 1px"></div>
    	</div>
    </div>
    </body>
    </html>

    index.css

    .box1{
    	display: flex;
    }
    .box2{
    	display: flex;
    	justify-content: center;
    }
    .box3{
    	display: flex;
    	justify-content: flex-end;
    }
    .box4{
    	display: flex;
    	align-items: center;
    }
    .box5{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .box6{
    	display: flex;
    	justify-content: flex-end;
    	align-items: center;
    }
    .box7{
    	display: flex;
    	align-items: flex-end;
    }
    .box8{
    	display: flex;
    	justify-content: center;
    	align-items: flex-end;
    }
    .box9{
    	display: flex;
    	align-items: flex-end;
    	justify-content: flex-end;
    }
    .box10{
    	display: flex;
    	justify-content: space-between;
    }
    .box11{
    	display: flex;
    	justify-content: space-between;
    	flex-direction: column;
    }
    .box12{
    	display: flex;
    	justify-content: space-between;
    	flex-direction: column;
    	align-items: center;
    }
    .box13{
    	display: flex;
    	justify-content: space-between;
    	flex-direction: column;
    	align-items: flex-end;
    }
    .box14{
    	display: flex;
    }
    .box14dot2{
    	align-self: center;
    }
    .box15{
    	display: flex;
    	justify-content: space-between;
    }
    .box15dot2{
    	align-self: flex-end;
    }
    .box16{
    	display: flex;
    }
    .box16dot2{
    	align-self: center;
    }
    .box16dot3{
    	align-self: flex-end;
    }
    .box17{
    	display: flex;
    	flex-wrap: wrap;
    	align-content: space-between;
    	justify-content: flex-end;
    }
    .box18{
    	display: flex;
    	flex-direction: column;
    	justify-content: space-between;
    }
    .box18column{
    	display: flex;
    	justify-content: space-between;
    }
    .box19{
    	display: flex;
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box20{
    	display: flex;
    	flex-direction: column;
    	flex-wrap: wrap;
    	align-content: space-between;
    }
    .box21{
    	display: flex;
    	flex-wrap: wrap;
    }
    .box21row1{
    	display: flex;
    	flex-basis: 100%;
    }
    .box21row2{
    	display: flex;
    	flex-basis: 100%;
    	justify-content: center;
    }
    .box21row3{
    	display: flex;
    	flex-basis: 100%;
    	justify-content: space-between;
    }
    .box22{
    	display: flex;
    	flex-wrap: wrap;
    }

    2、

    展开全文
  • 微信小游戏开发学习视频。
  • 微信小程序实训day03

    2019-06-19 23:51:31
    今天主要讲了微信小程序的wx:if、wx:for、wx:key,<swiper>,<map>的用法和数据绑定以及定义模板。说真的,今天的内容感觉挺让我内心复杂的,例如表面上比较简单的map的使用,我在<view>和</...

    今天主要讲了微信小程序的wx:if、wx:for、wx:key,<swiper>,<map>的用法和数据绑定以及定义模板。说真的,今天的内容感觉挺让我内心复杂的,例如表面上比较简单的map的使用,我在<view>和</view>之间写了map标签,然后在<map>上添加了longtitude,latitude,scale,style属性,在对应的js文件内也添加了对应的属性和值,但是调试的时候提示网络层渲染层错误,不能够把地图显示出来,其次我去微信开发者社区那抄了一份只使用map的代码,然后复制黏贴,再调试,依旧提示渲染层错误,但是可以正确显示地图来,这可真是始料未及。

        <map
          style="width: 100%; height:700px;"
          latitude="{{latitude}}"
          longitude="{{longitude}}"
          markers="{{markers}}"
          covers="{{covers}}"
          show-location
          bindmarkertap="markertap"
          markers="{{markers}}"
          scale="13"
        ></map>
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        longitude:0,
        latitude:0,
        markers: [],
        showView: true
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        console.log(this)
        
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        //console.log(this);
        var _this=this;
        //获取当前位置
        //wx.getLocation(object)
        wx.getLocation({
          success: function(res) {
            console.log(res)
            _this.setData({
              longitude:res.longitude,
              latitude:res.latitude,
            })
          var markers1 = [];
        markers1.push({
          id: 10,
          latitude: res.longitude,
          longitude: res.latitude,
          iconPath: "../assets/icons/location.png",
        })
        markers:markers1
          }
        })
      },
    
    })

    然后是今天的第二个作业,通过用户同意获取用户手机包括型号,屏幕大小等等数据并打印出来,但是我虽然获取到了那些数据,可是调试时一直报语法错误,真的没有一点点的办法,今天的作业被卡死在这里做不了

    // mine/mine.js
    const app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
          model:"",
          pixelRatio:0,
          windowWidth:0,
          windowHeight:0,
          language:"",
          version:"",
          platform:""
        },
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        wx.getSystemInfo({ 
          success(res) { 
             console.log(res.model)   
             console.log(res.pixelRatio)  
             console.log(res.windowWidth)   
             console.log(res.windowHeight)    
             console.log(res.language)    
             console.log(res.version)    
             console.log(res.platform) 
             } 
        })
    
      },
      onGotUserInfo: function (res){
        console.log(res)
        this.setdata({
          smodel: res.model,
          pixelRatio: res.pixelRatio,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          language: res.language,
          version: res.version,
          platform: res.platform
        })
      }
    })

    命途多舛,继续努力

    展开全文
  •  2、调用微信小程序的接口获取你的手机信息,在“我的” 页面里把手机信息展示出来(包括手机型号、手机系统、分辨率)  3、把整个“地图”页面变成地图(最好有浮标定位到当前位置) 我的页面: wxml ...

    1、数据绑定

    WXML 中的动态数据均来自对应 Page 的 data。

    简单绑定

    数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:<view> {{ message }} </view>

    关键字(需要在双引号之内)

    true:boolean 类型的 true,代表真值。

    false: boolean 类型的 false,代表假值。

    <checkbox checked="{{false}}"> </checkbox>

    2、列表渲染

    wx:for

    在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

    默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item

    <view wx:for="{{array}}">
      {{index}}: {{item.message}}
    </view>
    
    Page({
      data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
      }
    })
    

    使用 wx:for-item 可以指定数组当前元素的变量名,

    使用 wx:for-index 可以指定数组当前下标的变量名:

    <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
      {{idx}}: {{itemName.message}}
    </view>

    wx:key

    如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

    wx:key 的值以两种形式提供

    1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
    2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

    当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。

    3、条件渲染

    wx:if

    在框架中,使用 wx:if="" 来判断是否需要渲染该代码块:

    <view wx:if="{{condition}}"> True </view>
    

    也可以用 wx:elif 和 wx:else 来添加一个 else 块:

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

    如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。

    4、模板

    WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

    定义模板

    使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

    <!--
      index: int
      msg: string
      time: string
    -->
    <template name="msgItem">
      <view>
        <text> {{index}}: {{msg}} </text>
        <text> Time: {{time}} </text>
      </view>
    </template>
    

    使用模板

    使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

    <template is="msgItem" data="{{...item}}"/>
    
    Page({
      data: {
        item: {
          index: 0,
          msg: 'this is a template',
          time: '2016-09-15'
        }
      }
    })

    5、引用

    WXML 提供两种文件引用方式importinclude

    import

    import可以在该文件中使用目标文件定义的template,如:

    在 item.wxml 中定义了一个叫itemtemplate

    <!-- item.wxml -->
    <template name="item">
      <text>{{text}}</text>
    </template>
    

    在 index.wxml 中引用了 item.wxml,就可以使用item模板:

    <import src="item.wxml"/>
    <template is="item" data="{{text: 'forbar'}}"/>

    6、swiper组件

    滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

    属性类型默认值必填说明最低版本
    indicator-dotsbooleanfalse是否显示面板指示点1.0.0
    indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色1.1.0
    indicator-active-colorcolor#000000当前选中的指示点颜色1.1.0
    autoplaybooleanfalse是否自动切换1.0.0
    currentnumber0当前所在滑块的 index1.0.0
    intervalnumber5000自动切换时间间隔1.0.0
    durationnumber500滑动动画时长1.0.0
    circularbooleanfalse是否采用衔接滑动1.0.0
    verticalbooleanfalse滑动方向是否为纵向1.0.0
    previous-marginstring"0px"前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值1.9.0
    next-marginstring"0px"后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值1.9.0
    display-multiple-itemsnumber1同时显示的滑块数量1.9.0
    skip-hidden-item-layoutbooleanfalse是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息1.9.0
    easing-functionstring"default"指定 swiper 切换缓动动画类型2.6.5
    bindchangeeventhandle current 改变时会触发 change 事件,event.detail = {current, source}1.0.0
    bindtransitioneventhandle swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}2.4.3
    bindanimationfinisheventhandle 动画结束时会触发 animationfinish 事件,event.detail 同上1.9.0

    easing-function 的合法值

    说明最低版本
    default默认缓动函数 
    linear线性动画 
    easeInCubic缓入动画 
    easeOutCubic缓出动画 
    easeInOutCubic缓入缓出动画

    7、map

    地图。相关api wx.createMapContext

    个性化地图能力可在小程序后台“开发-开发者工具-腾讯位置服务”申请开通,详见《小程序个性地图使用指南》。 小程序内地图组件应使用同一 subkey,可通过 layer-style(地图官网设置的样式 style 编号)属性选择不同的底图风格。 组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

    8、作业

     1、在“我的” 页面调用微信小程序里的方法,把用户头像、用户名称做一个列表
     2、调用微信小程序的接口获取你的手机信息,在“我的” 页面里把手机信息展示出来(包括手机型号、手机系统、分辨率)
     3、把整个“地图”页面变成地图(最好有浮标定位到当前位置)

    我的页面:

    wxml

    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class='sqb'> 授权 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
          <view >
          <view class='title'>
          <text>用户信息</text>
          </view >
      <block wx:for='{{userdata}}' wx:key='index' >
        <view class='dataitem' >
            <text>{{item.item}} : {{item.itemdata}}</text>
        </view>
      </block>
    </view>
    <view >
          <view class='title'>
          <text>手机信息</text>
          </view >
      <block wx:for='{{phonedata}}' wx:key='index' >
        <view class='dataitem' >
            <text>{{item.item}} : {{item.itemdata}}</text>
        </view>
      </block>
    </view>
        </block>
      </view>
    </view>
    

    wxss

    .sqb{
      margin-top: 100rpx;
    }
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .dataitem{
      color: #aaa;
      height: 100rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .title{
      text-align: center;
    }

    js

    const app = getApp()
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        userInfo: {},
        userdata:[],
        phonedata:[],
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
    
      },
      getUserInfo: function (e) {
        console.log(e)
        if ( e.detail.userInfo){
          this.getuserdata(e.detail.userInfo)
          this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
          })
        }else{
          this.setData({
            hasUserInfo: false
          })
        }
        
      },
      getuserdata:function(e){
        var data = [{ 'item': '昵称', 'itemdata': '' }, { 'item': '国家', 'itemdata': '' }, { 'item': '城市', 'itemdata': '' }]
        data[0].itemdata=e.nickName
        data[1].itemdata = e.country
        data[2].itemdata= e.province + '/' + e.city
        this.setData({
          userdata:data
        })
        console.log(data)
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        if (app.globalData.userInfo) {
          this.getuserdata(app.globalData.userInfo)
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse) {
          // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.getuserdata(res.userInfo)
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.getuserdata(app.globalData.userInfo)
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
        console.log(this.data.userInfo)
        var pdata = [{ 'item': '手机型号', 'itemdata': '' }, { 'item': '手机系统', 'itemdata': '' }, { 'item': '分辨率', 'itemdata': ''} ]
        var i
        var that=this
        wx.getSystemInfo({
          success: function (res) {
            pdata[0].itemdata=res.model
            pdata[1].itemdata=res.system
            pdata[2].itemdata=res.screenWidth+'*'+res.screenHeight
            that.setData({
              phonedata:pdata
            })
            console.log(pdata)
          },
        })
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    地图页面:

    wxml

    <view style="width:100%;height:100%">
      <map style="width:100%;height:100%" longitude='{{longitude}}' latitude='{{latitude}}' scale='12' show-location='true'></map>
    </view>

    wxss

    page{
      width: 100%;
      height: 100%;
    }

    js

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        longitude:0,
        latitude:0,
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        var that=this;
        wx.getLocation({
          success: function(res) {
            console.log(res)
            that.setData({
              latitude:res.latitude,
              longitude:res.longitude
            })
            console.log(that.data.latitude,that.data.longitude)
          },
        })
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

     

    展开全文
  • 小程序才会返回,可通过云调用直接获取开放数据,详细见 云调用直接获取开放数据 2.7.0   2、选择本地图片并转为base64位 通过wx.chooseImage选择本地图片获得图片路径,用wx....

    1、授权获取用户信息:wx.getUserInfo(Object object)

    调用前需要 用户授权 scope.userInfo。

    获取用户信息。

    参数

    Object object

    属性类型默认值必填说明
    withCredentialsboolean 是否带上登录态信息。当 withCredentials 为 true 时,要求此前有调用过 wx.login 且登录态尚未过期,此时返回的数据会包含 encryptedData, iv 等敏感信息;当 withCredentials 为 false 时,不要求有登录态,返回的数据不包含 encryptedData, iv 等敏感信息。
    langstringen显示用户信息的语言
    successfunction 接口调用成功的回调函数
    failfunction 接口调用失败的回调函数
    completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

    object.lang 的合法值

    说明最低版本
    en英文 
    zh_CN简体中文 
    zh_TW繁体中文 

    object.success 回调函数

    参数

    Object res

    属性类型说明最低版本
    userInfoUserInfo用户信息对象,不包含 openid 等敏感信息 
    rawDatastring不包括敏感信息的原始数据字符串,用于计算签名 
    signaturestring使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息,详见 用户数据的签名验证和加解密 
    encryptedDatastring包括敏感数据在内的完整用户信息的加密数据,详见 用户数据的签名验证和加解密 
    ivstring加密算法的初始向量,详见 用户数据的签名验证和加解密 
    cloudIDstring敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据2.7.0

     

    2、选择本地图片并转为base64位

    通过wx.chooseImage选择本地图片获得图片路径,用wx.getFileSystemManager()获得FileSystemManager对象,然后通过FileSystemManager的readFile读取图片的base64。

    (1)wx.chooseImage(Object object)

    从本地相册选择图片或使用相机拍照。

    参数

    Object object

    属性类型默认值必填说明
    countnumber9最多可以选择的图片张数
    sizeTypeArray.<string>['original', 'compressed']所选的图片的尺寸
    sourceTypeArray.<string>['album', 'camera']选择图片的来源
    successfunction 接口调用成功的回调函数
    failfunction 接口调用失败的回调函数
    completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

    object.sizeType 的合法值

    说明最低版本
    original原图 
    compressed压缩图 

    object.sourceType 的合法值

    说明最低版本
    album从相册选图 
    camera使用相机 

    object.success 回调函数

    参数

    Object res

    属性类型说明最低版本
    tempFilePathsArray.<string>图片的本地临时文件路径列表 
    tempFilesArray.<Object>图片的本地临时文件列表1.2.0

    res.tempFiles 的结构

    属性类型说明
    pathstring本地临时文件路径
    sizenumber本地临时文件大小,单位 B
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success (res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
      }
    })

    (2)FileSystemManager

    1)FileSystemManager wx.getFileSystemManager()

    获取全局唯一的文件管理器

    返回值

    FileSystemManager

    文件管理器

     

    2)FileSystemManager.readFile(Object object)

    读取本地文件内容

    参数

    Object object

    属性类型默认值必填说明
    filePathstring 要读取的文件的路径
    encodingstring 指定读取文件的字符编码,如果不传 encoding,则以 ArrayBuffer 格式读取文件的二进制内容
    successfunction 接口调用成功的回调函数
    failfunction 接口调用失败的回调函数
    completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

    object.encoding 的合法值

    说明最低版本
    ascii  
    base64  
    binary  
    hex  
    ucs2以小端序读取 
    ucs-2以小端序读取 
    utf16le以小端序读取 
    utf-16le以小端序读取 
    utf-8  
    utf8  
    latin1  

    object.success 回调函数

    参数

    Object res

    属性类型说明
    datastring/ArrayBuffer文件内容

    object.fail 回调函数

    参数

    Object res

    属性类型说明
    errMsgstring错误信息

    res.errMsg 的合法值

    说明最低版本
    fail no such file or directory, open ${filePath}指定的 filePath 所在目录不存在 
    fail permission denied, open ${dirPath}指定的 filePath 路径没有读权限

     

    3、不用授权获取用户信息open-data

    用于展示微信开放的数据。

    属性类型默认值必填说明最低版本
    typestring 开放数据类型1.4.0
    open-gidstring 当 type="groupName" 时生效, 群id1.4.0
    langstringen当 type="user*" 时生效,以哪种语言展示 userInfo1.4.0

    type 的合法值

    说明最低版本
    groupName拉取群名称1.4.0
    userNickName用户昵称1.9.90
    userAvatarUrl用户头像1.9.90
    userGender用户性别1.9.90
    userCity用户所在城市1.9.90
    userProvince用户所在省份1.9.90
    userCountry用户所在国家1.9.90
    userLanguage用户的语言1.9.90

    lang 的合法值

    说明最低版本
    en英文 
    zh_CN简体中文 
    zh_TW繁体中文 

    Bug & Tip

    1. tip:只有当前用户在此群内才能拉取到群名称
    2. tip:关于open-gid的获取请使用 wx.getShareInfo

    示例代码

    <open-data type="groupName" open-gid="xxxxxx"></open-data>
    <open-data type="userAvatarUrl"></open-data>
    <open-data type="userGender" lang="zh_CN"></open-data>

     

     

    展开全文
  • 今天老师开始讲了微信小程序。 但是今天设备出了一些事情,所以耽误了蛮多时间。 1.在百度搜索微信平台公众官网,然后进入之后登录,点击普通小程序开发者工具,下载稳定版的64位微信小程序开发软件。 2.出了...
  • 微信小程序实训 Day 03 实习日志

    千次阅读 2019-06-27 23:00:05
    今天老师讲了微信小程序的文档,包括框架,组件和API。 复习了昨天的提到了app.json里面的page路由很重要,显示了几个页面。第二个是app.js里面的钩子函数。第三个是全局变量globalData。第四个提到了project....
  • 今天主要熟悉了微信小程序的基本框架,实现了页面的跳转和优化使用体验,顺便学习了一下flex布局。flex布局我学的半桶水就贴上大佬的链接好了 阮一峰的flex布局教程(语法篇) 至于我基本上参照着大佬的教程写出来...
  • 今天是实训的第一天,老师简单地讲解了html5,CSS和JavaScript的一些基本应用,留下了一点点小小的作业,一个是不使用第三个变量交换两个变量的值,另一个是用JavaScript打印九九乘法表。虽然非常简单,但也提升了我...
  • 微信小程序实训 Day 01 实习日志

    千次阅读 2019-06-27 22:55:52
    1.第一次实训还是有一点点激动滴~ 2.老师上课前发了两个软件包,chrome和sublime text3,因为之前有接触过前端,所以电脑里面已经安装好了这两个软件了。 3.老师讲课速度很快,因为老师打算今天上午讲完html,css...
  • 微信小程序实训 Day 05 实习日志

    千次阅读 2019-06-27 23:00:44
    框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。 说明: wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会...
  • 今天开始讲另外一种功能的小程序,是仿美团外卖的,老师嫌另外一个本来的商城不好看换了美团外卖哈哈~ 1.搜索框 学到了它的吸顶效果 <!-- 搜索 --> <view class="sout {{top>20?'fixed':''}}" ...
  • 1.在map标签里添加show-location可以显示带有方向的定位标志。 2.在app.wxss里面设置.container{height:100%;},可以保证显示效果 3.将导入的图片铺满整个屏幕 .auto-img{ width:100%;...5.背景图片不能用本地文件...
  • 微信小程序实训报告

    2021-06-29 13:17:35
    这周是实习的第一周,这周第一天学习了git仓库同步老师的code,安装了vscode,学习了微信开发者工具的安装和使用,学习了创建一个小程序,和创建页面,以及小程序项目结构以及常用标签,使用开发者文档等基础入门知识...
  • 因为第六和第七天讲的内容是同一个天气预报小程序,所以写在一起。 今天是对昨天讲的天气预报小程序进行进一步的补充,有昨天的滑动,还有获取准确的地址信息,然后可以实现搜索地址之后显示该地址的天气信息,比...
  • this.data.total ){ //调用微信的提示框,提示用户没有更多数据了 wx.showToast({ title: '我是有底线的!', //去掉默认图标 icon:'none' }) //终止程序 return } console.log("触底了"); //拿到全局的请求参数 var ...
  • 一、HTML 1、html为超文本标记语言 2、html文档的结构 <!DOCTYPE html> <html> <!-- 头部 --> <head> <meta charset="utf-8"> <title></title>...sty...
  • 介绍小程序 基本目录结构及其练习 页面基本元素 配置 模板语法 一、介绍小程序 小程序发展势头正足,有发展前景~ 小程序的优势 轻量化免注册使用 背景生态 方便营销 什么是云开发 对前端者友好开发 使用 js + ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,893
精华内容 1,157
关键字:

微信小程序实训

微信小程序 订阅