微信小程序练习demo学习

demo练习代码 ——》 gitee AppletsDemo

微信小程序

微信小程序中全局 app.json.

// An highlighted block
{ 
//pages 里面的内容为页面入口的配置
  "pages": [
    "pages/index/index",
    "pages/userConsole/userConsole",
    "pages/storageConsole/storageConsole",
    "pages/databaseGuide/databaseGuide",
    "pages/addFunction/addFunction",
    "pages/deployFunctions/deployFunctions",
    "pages/chooseLib/chooseLib",
    "pages/openapi/openapi",
    "pages/openapi/serverapi/serverapi",
    "pages/openapi/callback/callback",
    "pages/openapi/cloudid/cloudid",
    "pages/im/im",
    "pages/im/room/room"
  ],
  //window为全局样式字体等设置     可以单独在每个页面的json中设置局部上部分导航内容
  "window": {
    "backgroundColor": "#ddd",    //页面刷新时下拉进度条的背景色
    "backgroundTextStyle": "dark",    //页面刷新时下拉背景字体、loading 图的样式，仅支持 dark/light。
    "navigationBarBackgroundColor": "#000", //上部分导航栏背景颜色，如"#000000"。
    "navigationBarTitleText": "我的微信",   //上部分导航栏文字内容
    "navigationBarTextStyle": "white",   //上部分导航栏文字字体颜色
    "enablePullDownRefresh": true     //是否页面下拉刷新
  },
  //整个小程序下部分导航内容的配置  tab 的列表最少2个、最多5个 tab
  "tabBar": {
    "selectedColor": "00fff0",    //被选中下部分导航栏选中字体颜色
    "borderStyle": "black",      //导航栏与内容的分割线颜色
    "list": [
      {
      "pagePath": "pages/index/index",      //点击跳转的index页面
      "text": "首页",    //显示的文字
      "iconPath": "images/icon4.png",      //icon图片
      "selectedIconPath": "images/icon1.png"   //选中后的icon图片
    },
    {
      "pagePath": "pages/im/im",  //点击跳转的index页面
      "text": "日志",  //显示的文字
      "iconPath": "images/icon3.png",   //icon图片
      "selectedIconPath": "images/icon5.png"   //选中后的icon图片
    }
  ]
  },
    "networkTimeout": {  //设置各种网络请求的超时时间
    "request": 20000,            //20000ms = 20s   默认最大超时时间60s
    "connectSocket": 20000, 
    "uploadFile": 20000,
    "downloadFile": 20000
  },
  "debug": true,      //调试运行的所有执行的步骤内容打印在控制台中
  "sitemapLocation": "sitemap.json",
  "style": "v2"
}

创建页面的方式

1. 在app.json中填写路径后编译；
2. 直接创建文件夹内容；

编码要求

• 不能直接使用HTML文件
• 可以全部使用css文件
• JS脚本文件没有window对象

——语法 ——

1、视图容器 组件

1、view： 容器
2、scroll-view 在这里插入代码片

单位rpx -> iphone6

—— 模板 ——

// 同页面  页面内 定义模板
<!--pages/demo/iconTextInput.wxml-->
<icon type="success"></icon>
<icon type="success_no_circle"></icon>

<!-- 模板操作定义 与引用 -->
<template name="testName1">
	<view class="test">
		<view>name: {{name}}</view>
		<view>age: {{age}}</view>
	</view>
</template>

<template name="testName2">
	<view class="test2">
		<view>姓名： {{name}} ，年龄： {{age}}</view>
	</view>
</template>



<!-- 使用模板1 -->
<template is="{{showTem}}" data="{{...item}}"></template>

<!-- 使用模板2 -->
<block wx:for="{{[1,2,3,5,6,7,8]}}" wx:for-item="list">
<template is="{{list % 2 === 0 ? 'testName1' : 'testName2'}}" data="{{...item}}"></template>
</block>





/***************** js ************/
  data: {
    item: {
      name: "Tom",
      age: 18,
    },
    showTem: "testName1",
   
  },



/********************* css *********************/
/* pages/demo/iconTextInput.wxss */
.test {
   border: 1px solid #000;
}

.test2 {
   color: crimson;
}

//页面外 模板使用


<!-- 页面外的 模板导入方法使用  import -->
<import src="../../template/importTest/importTest.wxml" />

<template is="importTest" data="{{...item}}"></template>

<!-- 页面外的 模板导入方法使用  include -->
<include src="/template/includeTest.wxml" />







/******************** importTest.wxml *********************/
<template name="importTest">
	<view>name: {{name}},import导入模板文件方法，有数据的传输，以template作为模板标签进行编写</view>
</template>






/******************** includeTest.wxml *********************/
<view>
	<swiper>
		<swiper-item>
			111 include 导入是直接导入整个页面，不含template模板和数据传值
		</swiper-item>
		<swiper-item>
			222
		</swiper-item>
		<swiper-item>
			333
		</swiper-item>
	</swiper>
</view>

——事件——

<!-- 事件绑定使用  bind catch -->


<!-- 事件绑定bind基础 -->
<view class="content">
	<view data-myId="{{myId}}" bindtouchstart="clickTest" bindtouchmove="clickTest1" bindtap="clickTest2" class="btn">
		bindtap
	</view>

</view>



<!-- 事件冒泡 -->
<view class="frame" bindtap="clickBubbleFa">
	<view style="color: #fff;" catchtap="clickBubbleTe">
		冒泡父级
		<view bind:tap="clickBubble" class="btn">
			冒泡
		</view>
	</view>
</view>






/********************** js *******************/
   data: {
      myId: '123'
   },

   clickTest(event) {
      console.log('touchstart => ', event)
   },

   clickTest1: function(event) {
      console.log('move => ', event)
   },

   clickTest2: function(event) {
      console.log('tap => ', event)
   },

   clickBubbleFa(event) {
      console.log('tapFu => ', event)
   },

   clickBubbleTe(event) {
      console.log('taptest => ', event)
   },

   clickBubble(event) {
      console.log('tapZi => ', event)
   },

——导航栏点击切换轮播内容——

/******************* wxml ********************/
/**
    注意： navigator 左右滑动 外层container去掉默认样式
***/
<!-- 导航栏菜单示例 -->
<view class="container">
	<view class="menu">
		<scroll-view scroll-x>
			<view class="nav">
				<navigator wx:for="{{navData}}" wx:for-index="i" data-Index="{{i}}" url="" bindtap="setNavTab" class="{{current === i ? 'active' : ''}}">
					{{item}}
				</navigator>
			</view>
		</scroll-view>
	</view>


	<view class="cont">
		<swiper current="{{current}}" bindchange="getNavTable">
			<swiper-item wx:for="{{navData}}">
				<view class="swip-cont">{{index}} —— {{item}}</view>
			</swiper-item>
		</swiper>
	</view>

</view>







/*********************** css *******************/
/* pages/menu/example.wxss */
.menu {
   background: rgb(85, 129, 143);
}

.nav {
   /* background: rgb(85, 129, 143); */
   color: #fff;
   display: flex;
   white-space: nowrap;
   font-size:16px;
   height: 60rpx;
   line-height: 60rpx;
}

.nav navigator {
  margin: 0 10px;
}

.swip-cont {
   width: 100%;
   height: 120px;
   background: rgb(35, 80, 59);
   color: #fff;
   text-align: center;
   line-height: 120px;
}

.active {
   color: rgb(5, 90, 19);
}







/*********************** js ******************/
 /**
    * 页面的初始数据
    */
   data: {
      navData: ["社会新闻", "政治新闻", "娱乐新闻", "体育新闻", "财经新闻", "国际新闻"],
      current: 0
   },


   /**
    * 点击导航栏
    * @param {*} options 
    */
   setNavTab: function(event) {
   
      this.setData({
         current: event.currentTarget.dataset.index
      })
      // console.log(event.currentTarget.dataset.index, this.data.current)
   },

   /**
    * 切换轮播内容
    * @param {*} options 
    */
   getNavTable(event) {
      this.setData({
         current: event.detail.current
      })
      // console.log(event.detail.current)
   },
   

——movable-area movable-view可移动容器 ——

/*************************** wxml ***********************/
<!--pages/movable/movable.wxml-->
<!-- movable-view 可移动的视图容器  与movable-area配合使用 -->
<!--使用movable-area中的属性scale-area要与movable-view中的属性scale配合使用，
scale可单独使用，而scale-area不能单独使用  -->
<view class="container">
	<movable-area class="ares" scale-area>
		<movable-view class="view-frame" direction="all" scale>
			<rich-text nodes="{{node}}"></rich-text>
		</movable-view>
	</movable-area>

</view>



/*************************** css ********************/
/* pages/movable/movable.wxss */
.ares {
   width: 100%;
   height: 500rpx;
   background: #c3c3c3;
}

.view-frame {
   width: 50%;
   height: 40%;
   background: #048166;
   display: flex;
   justify-content: center;
   align-items: center;
}




/******************* js ******************/
 data: {
      node: [{
         name: "h4",
         attrs: {
            class: 'title',
            style: 'color: red;',
         },
         children: [{
            type: 'text',
            text: 'movable-view可移动内容'
         }]
      }]
   },

——原生组件——

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

• camera
• canvas
• input（仅在focus时表现为原生组件）
• live-player
• live-pusher
• map
• textarea
• video

原生组件的使用限制：

• 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。

后插入的原生组件可以覆盖之前的原生组件。

• 原生组件还无法在 picker-view 中使用。

基础库 2.4.4 以下版本，原生组件不支持在 scroll-view、swiper、movable-view 中使用。

• 部分CSS样式无法应用于原生组件，例如：

无法对原生组件设置 CSS 动画 无法定义原生组件为 position: fixed
不能在父级节点使用 overflow: hidden
来裁剪原生组件的显示区域

• 原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和
  capture 的事件绑定方式。
• 原生组件会遮挡 vConsole 弹出的调试面板。
  在工具上，原生组件是用web组件模拟的，因此很多情况并不能很好的还原真机的表现，建议开发者在使用到原生组件时尽量在真机上进行调试。