邂逅小程序(王洪元)笔记01git，mustache，事件监听，获取用户信息，open-type，全局变脸，使用系统照片，scroll-view，样式，尺寸单位，import导入，遍历起别名，wxs

最新推荐文章于 2022-03-25 21:17:45 发布

心湖中的石子

最新推荐文章于 2022-03-25 21:17:45 发布

阅读量1.6k

点赞数 1

分类专栏：微信小程序学习笔记

本文链接：https://blog.csdn.net/weixin_43745804/article/details/113374274

版权

微信小程序学习笔记专栏收录该内容

10 篇文章 2 订阅

订阅专栏

1、使用git托管代码及设置tag

使用git bash来初始化项目（需提前安装），进入到项目目录

1、初始化项目

git init

2、添加文件

git add .

3、提交项目

 git commit -m '项目名称（MiniProgramStudy）'

4、获取git地址，添加文件

git remote add origin https://github.com/hujianad/MiniProgramStudy.git

5、push文件

git push -u origin master

每次修改完成，需要提交数据都需要执行

git add.//添加
git commit -m '阶段名（step1）'//提交
git tag 01_step1//设置tag
git tag//查询tag
gti status //查询状态
git log//查看提交历史，可以看到版本号（很长一串，可以复制其中一小部分）
git reset --hard 51f8b //（版本号的一部分哈希值）--hard是强制回退
git push --tags
//去gitbub上找到响应的tag，获取地址，回到gitbash的窗口
git clone 地址//下载某一个tag阶段的代码

git cheout 某一阶段tag//可以查看该阶段的代码

2、mustache绑定数据

home.js中设置data对象
data对象里添加子对象
home.wxml里面
和vue非常向，都是使用es6的mustache语法

  data: {
    name:'zhangsan',
    age:18
  },

<view> hello {{name}}</view>
<view>age:{{age+2}}</view>

3、使用mustache接无线：for循环遍历数组

home.js
  data: {
    name:'zhangsan',
    age:18,
    students:[
      {name:'zhangsan',age:13},
      {name:'lisi',age:23},
      {name:'wanger',age:16},
      {name:'zhaoqiu',age:17},
      {name:'sunqi',age:25},
    ]
  },

<view wx:for="{{students}}">{{item.name}}</view><!--item是默认的循环项的名字-->

4、事件监听改变data及data数据的修改

home.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    counter:0
  },
  addclick(){
    this.setData({
      counter:this.data.counter+1
    })
  },
}

home.wxml

<view>当前计数器{{counter}}</view>
<button size="mini" bindtap='addclick'>+</button>

5、getUserInfo获得用户信息

getUserInfo将来会被废弃，全新的方法见6，使用按钮的open-type属性

onLoad: function (options) {
    wx.getUserInfo({
      success: (result) => {   
        console.log('通过getuserInfo获得用户信息（权限）');
        console.log(result);
      },
      
    })
  },

6、按钮的opent-type属性和bindgetuserinfo属性

home.wxml

<button size="mini" bindgetuserinfo='accepetRight' open-type="getUserInfo">获取授权</button>

home.js

accepetRight(event){
    console.log(event);
  },

7、用open-data标签展示用户属性

home.wxml

<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>

8、使用globalData设置全局变量

app.js

App({
  "globalData":{
    "name":"zhangsan",
    "age":14
  
  },
}

home.js

// pages/home/home.js
const app=getApp();
console.log(app.globalData.name);

9、常见的几个监听事件

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //页面滚动
  onPageScroll(){
    console.log('page is scrolling');
  },
   //滚动到底
  onReachBottom(){
    console.log('page is on the bottom');

  },
   //下拉屏幕
  onPullDownRefresh(){
    console.log('page is pulldown');

  }

10、使用系统照片或拍照

home.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imagepath:''
  },
  selectImage(){
   wx.chooseImage({
     //不要使用function形式，而是要是用箭头函数
     success:res=>{
      const path=res.tempFilePaths[0];
      this.setData({
        imagepath:path
      })
     }
   })
  },
}

home.wxml

<image src="{{imagepath}}"/>
<button bindtap="selectImage">select image</button>

11、scroll-view的水平滚动

使用scroll-view标签，设置scroll-x或scroll-y实现水平或者纵向的滚动
.wxml

<scroll-view class="container" scroll-x >
  <view wx:for="{{myobjarr}}" wx:key="id" class="item">{{item.name}}</view>
</scroll-view>

.wxss

.container{white-space: nowrap; margin:0; padding: 0; background-color: green; }
.item{ width: 100px; height: 100px; background-color: tomato; margin:2px; display: inline-block;}

12、scroll-view对应的时间bindscroll

index.wxml

<!--index.wxml-->
<scroll-view class="container" scroll-x bindscroll="onmyscroll">
  <view wx:for="{{myobjarr}}" wx:key="id" class="item">{{item.name}}</view>
</scroll-view>

index.wxss

/**index.wxss**/
.container{white-space: nowrap; margin:0; padding: 0; background-color: green; }
.item{ width: 100px; height: 100px; background-color: tomato; margin:2px; display: inline-block;}

index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    myobjarr:[
      {id:1,name:'zhangsan'},
      {id:2,name:'lisi'},
      {id:3,name:'wanger'},
      {id:4,name:'mazi'},
      {id:5,name:'zhaoliu'},
      {id:6,name:'maba'},
    ]   
  },
  onmyscroll(event){
    console.log('i am scrolling',event.detail.deltaX);
  },
})

13、行内样式，页内样式，全局样式

行内样式：style=“键值对”
页内样式：page.wxss里写的内容
全局样式：app.wxss里写的内容

优先级类似于css，行内>业内>全局

14、尺寸单位rpx

可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx、

15、@import样式导入

在业内样式中导入其他目录内的样式，主要要是用分号结束
@import ‘/style/xxx.wxss’；

16、微信官方样式库

很久不更新了，但是样式还不错。可以用一下，自己写的没准还没他的好看
导入项目的时候导入dist目录一般。
下载地址
https://developers.weixin.qq.com/community/develop/article/doc/000ecc775a86807f7ba9b7dc956c13

17、wx：if判断

index.wxml

<view wx:if="{{isshow}}">is show?</view>
<button  bindtap="showView">set</button>

index.wxs

Page({
  data: {
    isshow:true,
    
    
  },
  showView(){
    this.setData({
      isshow:!this.data.isshow,
    });
  }

  
})

18、hidden隐藏

hidden隐藏且占位（display：none）

<view hidden="{{true}}">is show?</view>

19、block标签

用来包裹一组标签，类似于div，但block本身不会显示
index.wxml

<view wx:if="{{isshow}}" wx:key="{{index}}">
  <button>mubtn</button>
  <view>myview</view>
</view>

index.wxs

Page({
  data: {
    isshow:true,
    persons:['zhagnsan','lisi','wanger','mazi','zhaoliu','defu','gawa',]
    
  },  
})

等效于
index.wxml

<block wx:if="{{isshow}}" wx:key="{{index}}">
  <button>mubtn</button>
  <view>myview</view>
</block>

20、遍历数组时，为index和item起别名

一般多层嵌套循环的时候需要为index和item起别名

<view wx:for="{{persons}}" wx:for-item="person" wx:for-index="number">{{person}}--{{number}}</view>

乘法表

<view wx:for="{{9}}" wx:for-item="front" wx:for-index="i">
  <view wx:for="{{9}}" wx:for-item="after" wx:for-index="j">
    <view wx:if="{{i > j}}">{{front}}x{{after}}={{front * after}}</view>
  </view>
</view>

21、使用模板及使用import、 include载入外部模板

1、创建模板使用name标注模板名称
内置数据使用mustache语法预留出来

<template name="mytemp">
  <view>{{viewtext}}</view>
  <button>{{btntext}}</button>
</template>

2、使用模板，template标签+ is关键字
使用是也是用mustache语法将数据传入模板内。传入数据时，使用对象形式进行传递

<template is="mytemp" data="{{viewtext:'here is view text',btntext:'mybtntext'}}"></template>

3、使用import或include标签载入外部模板
mytemp.wxml

<template name="mytemp">
  <view>{{viewtext}}</view>
  <button>{{btntext}}</button>
</template>

index.wxml

<import src="/mytemp/mytemp.wxml"/>
<template is="mytemp" data="{{viewtext:'here is view text',btntext:'mybtntext'}}"></template>

4、如果想循环导入的话请使用include。用法同import

22、wxs微信脚本

在wxml中写wxs脚本和写JavaScript脚本基本一致，但需要用专门的<wxs>标签来界定

<wxs>
js代码，不能使用es6语法，只能使用es5语法
</wxs>

1、wxs的定义方式
必须给标签一个模块名

<wxs module="info">
  var sentence='here is some words';
  var sum=function (number1,number2){
    return number1+number2;
  }
</wxs>

2、使用module.exports导出模块
先导出，后使用

<wxs module="info">
  var sentence='here is some words';
  var sum=function (number1,number2){
    return number1+number2;
  }
  //common.js的模块化导出
  module.exports = {
  mywords:sentence,
  mycalcu:sum
  }
</wxs>

3、使用wxs标签

<view>{{info.mywords}}</view>
<view>{{info.mycalcu(4,5)}}</view>

23、在wxs单独文件中定义wxs微信脚本

实际类似于在mustache中调用自定义函数，因为mustache语法无法直接读取js的函数（通过事件回调除外），因此转而通过wxs来实现。
1、一般将模块单独存放在一个wxs.wxs文件中，然后再使用<wxs>标签导入

  var sentence='here is some words';
  var sum=function (number1,number2){
    return number1+number2;
  }
  //common.js的模块化导出
  module.exports = {
  mywords:sentence,
  mycalcu:sum
  }

2、使用<wxs>标签在wxml文件中导入

<wxs src="/wxs/mywxs.wxs" module="info"/>
<view>{{info.mywords}}</view>
<view>{{info.mycalcu(4,5)}}</view>

心湖中的石子

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
邂逅小程序(王洪元)笔记01git，mustache，事件监听，获取用户信息，open-type，全局变脸，使用系统照片，scroll-view，样式，尺寸单位，import导入，遍历起别名，wxs

1、使用git托管代码及设置tag使用git bash来初始化项目（需提前安装），进入到项目目录1、初始化项目git init2、添加文件git add .3、提交项目 git commit -m '项目名称（MiniProgramStudy）'4、获取git地址，添加文件git remote add origin https://github.com/hujianad/MiniProgramStudy.git5、push文件git push -u orig
复制链接

扫一扫