微信小程序 入门

显示与隐藏

• hidden=“{{ zf }}” zf=true/false true为隐藏,false为显示

数据绑定

• 在data:{msg:0} 里定义数据 在wxml中使用 {{msg}}

列表渲染

• wx:for=“{{数组名}}” wx:for-item=“item” wx:key=“index”
• wx:for-item=“item” 代表数组中的每个值
• wx:key=“index” 代表数组中的每个下标/唯一标识

条件渲染

• wx:if=“{{条件表达式}}” 为true就显示,false就不显示
• 多条判断 wx:elif=“{{条件表达式}}”
• 如果上面两个都是false,则可以使用 wx:else

模板引用

• 一
  • 建立模板
    • template 起一个name值
  • 在需要的地方引用
    • template 设置一个is属性,值为建立模板时的name值;设置一个data属性,值为需要引用的data里的数据
• 二 import方式;这种方式只能引用文件中template包裹着的内容
  • 建立一个 wxml 的文件 在文件里定义 template 需要起一个name值
  • 在需要的地方使用 import 的属性src 引用 在需要的地方使用 template 方式使用 ,设置一个is属性,值为建立模板时的name值;
  • ps:使用这个方法可以在template中嵌套template;如果写在template外面,在引入时不会显示
    三 include 这种方式只能引用文件中template不包裹的内容
  • 使用方式与方法二类似

wxcc

• 响应式像素 rpx 宽为375的屏幕中 2rpx == 1px
• @import “wxss文件地址” 引入外联样式 在wxss文件中引入
• 可以在标签中使用内联样式 style
• 选择器优先级: !important > style > # > . > 标签

wxs wxs语法参考

• 内部使用

<wxs module="b">
//暴露出去
  module.exports={
    mag:'内部wxs'
  }
</wxs>
<view>{{b.mag}}</view>

• 外部使用
  创建一个 a.wxs文件

// a.wxs的内容
module.exports={
	mssg='aa'
}

<wxs src="./a.wxs" module="a"></wxs>
<view>{{a.mssg}}</view>

• 变量
  wxs中可以使用 var 定义变量
• 注释
  wxs中单行注释 //
  多行注释 /* … */
• 运算符
  • 基本运算符
  • 一元运算符
  • 位运算符
  • 比较运算符
  • 等值运算符
  • 赋值运算符
  • 二元逻辑运算符
• 数据类型
  • 判断数据类型
    • typeof 例: typeof 数据
    • constructor 例: 数据 . constructor
  • number 数值
  • string 字符串
  • boolean 布尔
  • object 对象
  • array 数组
  • function 函数
  • date 日期
  • regexp 正则
• 基础类库
  • Number
  • Date
  • Global
  • console
  • Math
  • JSON

MINA框架

运行机制

• 启动
  • 冷启动 : 用户首次打开或者被销毁后打开
    • 自动销毁
    • 当短时间内连续收到两次以上收到系统内存告警
  • 热启动 : 用户打开过某个小程序,在一定时间内再次打开
• 加载
  

生命周期

• 程序生命周期
  • onLaunch
  • onShow
  • onHide
  • onError
• 页面生命周期
  • onLoad
  • onShow
  • onReady
  • onHide
  • onUnload
    

页面路由

事件流

• 事件捕获阶段
• 事件处理阶段
• 事件冒泡阶段
  

组件

• 视图容器
  • view
  • scroll-view
    • 实现 scroll-x 滚动 ,需要给scroll-view加上 white-space: nowrap;给子类加上display:inline-block;
    • scroll-y 不用
  • swiper
  • movable-view
  • cover-view
• 基本内容
  • icon
  • text
  • rich-text
  • progress
• 表单组件
• 媒体组件
• 导航组件

更改Data中的数据

• 使用setData()

	data:{name:22}  //数据
	
	this.setData({name:11})   //更改name为11

• 注意点
  • 使用setData更改的数据如果超过1024kb,会警告,卡顿
  • 解决方法(二维数组)

	data:{sz:[[...]]}   //数组
	// 在wxml中遍历
	// 更改数据时
	let a = `sz[${this.data.sz.length}]`
	this.setData({
		a:this.data.sz[0]   //新的数据
	})

路由

• getCurrentPages() 获取页面栈,可以操作data,setData等
• 路由传参
  • 在A页面跳转B页面 url="page/B/B?num=1&s=2"
  • 在B页面的onLoad生命周期函数接受onLoad: function(option){ let num= option.num; let s = option.s; console.log(num,s); }
• 注意跳转方式

本地存储

• 同步存储
  • wx.setStorageSync(‘键’,'值); //设置本地存储
  • wx.getStorageSync(‘键’) //获取
  • wx.clearStorageSync() //清空所有
  • wx.removeStorageSync(‘键’) //删除某一个

请求接口

• 必须是https规范,需要在小程序后台添加 request规范 https://域名
• 在开发时也可以关闭这个规范

自定义小程序头部

// app.json中
"window":{
    "navigationStyle":"custom" ,		//自定义开启
    "navigationBarTextStyle": "black"   //最上边的状态栏的颜色
  }
// index.js中
data:{wi:0,he:0},
onLoad(){ 
    this.setData({
      wi:wx.getMenuButtonBoundingClientRect().left,  	//获取胶囊左边的距离
      he:wx.getSystemInfoSync().statusBarHeight+wx.getMenuButtonBoundingClientRect().top+wx.getMenuButtonBoundingClientRect().height  //最上边的状态栏高度   胶囊距离上边的距离   胶囊的高度
    }) 

  },
  //在 wxml文件中
  <view style="width={{wi}}px;height:{{he}};"></view>
  //在wxss中自定义样式即可

自定义tabbar

• 在app.json中

	"tabBar":{
		"custom":true    //开启自定义tabbar
	}

• 在pages同级目录创建 custom-tab-bar 组件
  例:

//app.json
"tabBar": {
    "custom": true,
    "color": "#212121",
    "selectedColor": "#d01716",
    "backgroundColor": "#fefefe",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/ic_menu_choice_nor.png",
        "selectedIconPath": "icon/ic_menu_choice_pressed.png"
      },
      {
        "pagePath": "pages/add/add",
        "text": "+",
        "iconPath": "icon/1.png",
        "selectedIconPath": "icon/1.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "我的",
        "iconPath": "icon/ic_menu_me_nor.png",
        "selectedIconPath": "icon/ic_menu_me_pressed.png"
      }
    ]
  },
//custom-tab-bar组件中
//index.js
data: {  
    selected:0,  //默认选中
    color: "#333", // 未选中的字体的颜色
    selectedColor: "#d01716", // 选中时的字体颜色
    list: [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/ic_menu_choice_nor.png",
      "selectedIconPath": "icon/ic_menu_choice_pressed.png"
    },{
      "pagePath": "pages/add/add", 
      "iconPath": "icon/1.png",
      "selectedIconPath": "icon/1.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "我的",
      "iconPath": "icon/ic_menu_me_nor.png",
      "selectedIconPath": "icon/ic_menu_me_pressed.png"
    }
  ]
  }, 
  methods: {
    _tablist(e){
      let index = e.currentTarget.dataset.i;
      if(this.data.selected==index) return;
      this.setData({selected:index})
      let url = '/'+this.data.list[index].pagePath;
      wx.switchTab({
        url
      }) 
    }
  }
 //index.wxml
 <view class="tab">
  <view class="tab_list" wx:for="{{list}}" wx:key="index" bindtap="_tablist" data-i="{{index}}">
    <block wx:if="{{item.text}}">
      <image class="tab_list_image" src="../{{selected==index?item.selectedIconPath:item.iconPath}}"></image>
      <view class="tab_list_title" style="color:{{selected==index?selectedColor:color}}">{{item.text}}</view>
    </block>
    <block wx:if="{{!item.text}}">
    <view class="tab_list_image_p">
      <image class="tab_list_image_po" src="../{{item.selectedIconPath}}"></image>
    </view> 
    </block>
  </view> 
</view>
//index.wxss
.tab{
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
  /* background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal; */
  position: relative;
}
.tab_list{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.tab_list_image{
  width: 50rpx;
  height: 50rpx; 
}
.tab_list_image_p{
  position: absolute;
  border-radius: 50%;
  top: -40rpx;  
  width: 130rpx;
  height: 130rpx; 
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab_list_image_po{
  width: 100rpx;
  height: 100rpx; 
  background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%); background-blend-mode: normal, normal, screen, overlay, normal;

  border-radius: 50%;
}
.tab_list_title{
  font-size: 29rpx;
}
// 在每个tabBar页面的js文件中需要加入,判断选中
 onShow(){
    if (typeof this.getTabBar === 'function' &&
    this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0    //根据tabBar的顺序从0开始
    })
  } 
  },

效果图