devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序基础代码_微信小程序代码大全

作者：weixin_40725706 | 2024-07-16 04:34:03

赞

踩

微信小程序代码大全

                             微信小程序基础代码

可以使用 Visual Studio Code 开发微信小程序,看个人喜好了;

安装插件小程序开发助手

安装插件Easy Less 后支持 less样式开发

还需要配置下才支持less

添加:

  1. "less.compile": {
  2.  
  3. "outExt": ".wxcss"
  4.  
  5. }

1.

2.

 

3.

 

一.基础代码 wxml

  1. <!-- 
  2.   1 text 相当于以前web中的 span标签 行内元素  不会换行
  3.   2 view 相当于以前web中的 div标签 块级元素  会换行
  4.   3 checkbox 以前的复选框标签 
  5.  -->
  6. <!-- <text>1</text>
  7. <text>2</text>
  8. <view>1</view>
  9. <view>2</view> -->
  10.  
  11. <!-- 1 字符串 -->
  12. <view> {{msg}} </view>
  13. <!-- 2 数字类型 -->
  14. <view>{{num}}</view>
  15. <!-- 3 bool类型  -->
  16. <view> 是否是伪娘: {{isGirl}} </view>
  17. <!-- 4 object类型 -->
  18. <view>{{person.age}}</view>
  19. <view>{{person.height}}</view>
  20. <view>{{person.weight}}</view>
  21. <view>{{person.name}}</view>
  22.  
  23. <!-- 5 在标签的属性中使用 -->
  24. <view data-num="{{num}}"> 自定义属性</view>
  25.  
  26. <!-- 
  27.   6 使用bool类型充当属性 checked  
  28.     1 字符串和 花括号之间一定不要存在空格 否则会导致识别失败 
  29.       以下写法就是错误的示范
  30.          <checkbox checked="       {{isChecked}}"> </checkbox>
  31.  
  32.  -->
  33. <view>
  34.   <checkbox checked="{{isChecked}}"> </checkbox>
  35. </view>
  36.  
  37.  
  38. <!-- 
  39.   7 运算 => 表达式
  40.     1 可以在花括号中 加入 表达式 --  “语句”
  41.     2 表达式
  42.       指的是一些简单 运算 数字运算 字符串 拼接  逻辑运算。。
  43.       1 数字的加减。。
  44.       2 字符串拼接
  45.       3 三元表达式 
  46.     3 语句
  47.       1 复杂的代码段
  48.         1 if else
  49.         2 switch
  50.         3 do while 。。。。
  51.         4 for 。。。
  52.  -->
  53. <view>{{1+1}}</view>
  54.  
  55. <view>{{'1'+'1'}}</view>
  56.  
  57. <view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
  58.  
  59.  
  60. <!-- 
  61.   8 列表循环
  62.     1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
  63.     2 wx:key="唯一的值" 用来提高列表渲染的性能
  64.       1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
  65.       2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
  66.         [1,2,3,44,5]
  67.         ["1","222","adfdf"]
  68.     3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
  69.         wx:for-item="item" wx:for-index="index"
  70.     4 默认情况下 我们 不写
  71.        wx:for-item="item" wx:for-index="index"
  72.        小程序也会把 循环项的名称 和 索引的名称 item 和 index 
  73.        只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略
  74.  
  75.   9 对象循环
  76.     1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
  77.     2 循环对象的时候 最好把 item和index的名称都修改一下
  78.       wx:for-item="value"  wx:for-index="key"
  79.  
  80.  -->
  81.  <view>
  82.    <view 
  83.   wx:for="{{list}}"
  84.   wx:for-item="item"
  85.   wx:for-index="index"
  86.   wx:key="id"
  87.    >
  88.      索引：{{index}}
  89.      --
  90.      值:{{item.name}}
  91.    </view>
  92.  </view>
  93.  
  94.  <view>
  95.    <view>对象循环</view>
  96.    <view 
  97.   wx:for="{{person}}"
  98.   wx:for-item="value"  
  99.   wx:for-index="key"
  100.   wx:key="age"
  101.   >
  102.      属性:{{key}}
  103.      --
  104.      值:{{value}}
  105.    </view>
  106.  </view>
  107.  
  108.  <!-- 
  109.    10 block
  110.     1 占位符的标签 
  111.     2 写代码的时候 可以看到这标签存在
  112.     3 页面渲染 小程序会把它移除掉
  113.   -->
  114.  
  115.   <view>
  116.     <block 
  117.    wx:for="{{list}}"
  118.    wx:for-item="item"
  119.    wx:for-index="index"
  120.    wx:key="id"
  121.    class="my_list"
  122.     >
  123.       索引：{{index}}
  124.       --
  125.       值:{{item.name}}
  126.     </block>
  127.   </view>
  128.  
  129.  
  130.  
  131.   <!-- 
  132.     11 条件渲染
  133.       1 wx:if="{{true/false}}"
  134.         1 if , else , if else
  135.         wx:if
  136.         wx:elif
  137.         wx:else 
  138.       2 hidden 
  139.         1 在标签上直接加入属性 hidden 
  140.         2 hidden="{{true}}"
  141.  
  142.       3 什么场景下用哪个
  143.         1 当标签不是频繁的切换显示 优先使用 wx:if
  144.           直接把标签从 页面结构给移除掉 
  145.         2 当标签频繁的切换显示的时候 优先使用 hidden
  146.           通过添加样式的方式来切换显示 
  147.           hidden 属性 不要和 样式 display一起使用
  148.    -->
  149.  
  150.    <view>
  151.      <view>条件渲染</view>
  152.      <view wx:if="{{true}}">显示</view>
  153.      <view wx:if="{{false}}">隐藏</view>
  154.  
  155.      <view wx:if="{{flase}}">1</view>
  156.      <view wx:elif="{{flase}}">2 </view>
  157.      <view wx:else> 3 </view>
  158.  
  159.      <view>---------------</view>
  160.      <view hidden >hidden1</view>
  161.      <view hidden="{{false}}" >hidden2</view>
  162.  
  163.      <view>-----000-------</view>
  164.      <view wx:if="{{false}}">wx:if</view>
  165.      <view hidden  style="display: flex;" >hidden</view>
  166.    </view>

js

  1. //Page Object
  2. Page({
  3.   data: {
  4.     msg: "hello mina",
  5.     num: 10000,
  6.     isGirl: false,
  7.     person: {
  8.       age: 74,
  9.       height: 145,
  10.       weight: 200,
  11.       name: "富婆"
  12.     },
  13.     isChecked:false,
  14.     list:[
  15.       {
  16.         id:0,
  17.         name:"猪八戒"
  18.       },
  19.       {
  20.         id:1,
  21.         name:"天蓬元帅"
  22.       },
  23.       {
  24.         id:2,
  25.         name:"悟能"
  26.       }
  27.     ]
  28.   }
  29. });

 

 

 

二.事件及数据绑定  wxml

  1. <!-- 
  2.   1 需要给input标签绑定 input事件 
  3.     绑定关键字 bindinput
  4.   2 如何获取 输入框的值 
  5.     通过事件源对象来获取  
  6.     e.detail.value 
  7.   3 把输入框的值 赋值到 data当中
  8.     不能直接 
  9.       1 this.data.num=e.detail.value 
  10.       2 this.num=e.detail.value 
  11.     正确的写法
  12.       this.setData({
  13.         num:e.detail.value 
  14.       })
  15.   4 需要加入一个点击事件 
  16.       1 bindtap
  17.       2 无法在小程序当中的 事件中 直接传参 
  18.       3 通过自定义属性的方式来传递参数  data-operation="{{1}}     js中    const operation = e.currentTarget.dataset.operation;
  19.       4 事件源中获取 自定义属性
  20.  -->
  21. <input type="text" bindinput="handleInput" />
  22. <button bindtap="handletap" data-operation="{{1}}" >+</button>
  23. <button bindtap="handletap" data-operation="{{-1}}">-</button>
  24. <view>  
  25.   {{num}}
  26. </view>

js

  1. // pages/demo04/demo04.js
  2. Page({
  3.   data: {
  4.     num: 0
  5.   },
  6.   // 输入框的input事件的执行逻辑
  7.   handleInput(e) {
  8.     // console.log(e.detail.value );
  9.     this.setData({
  10.       num: e.detail.value
  11.     })
  12.   },
  13.   // 加 减 按钮的事件
  14.   handletap(e) {
  15.     // console.log(e);
  16.     // 1 获取自定义属性 operation 中的数据
  17.     const operation = e.currentTarget.dataset.operation;
  18.     this.setData({
  19.       num: this.data.num + operation
  20.     })
  21.   }
  22. })

 

三.  分辨率 rpx wxml

  1. <view>
  2.   rpx
  3. </view>

 

wxss

1 存在一个设计稿 宽度 414 或者 未知 page 
  1 设计稿 page 存在一个元素 宽度 100px
  2 拿以上的需求 去实现 不同宽度的页面适配 

  page px = 750 rpx
  1 px = 750 rpx / page
  100 px = 750 rpx * 100 / page 
  假设 设备是苹果6 分辨率  page =  375px
2 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性
  1 750 和 rpx 中间不要留空格
  2 运算符的两边也不要留空格

  /* 以下代码写法是错误  */
  /*  width:750 rpx * 100 / 375 ;  */

 

正确:

假设 设备是苹果6 分辨率375  page =  375px

view{
   width:calc(750rpx * 100 / 375);
   height: 200rpx;
   font-size: 40rpx;
   background-color: aqua;
 }

  1.  
  2. /* 
  3. 1 小程序中 不需要主动来引入样式文件 
  4. 2 需要把页面中某些元素的单位 由 px 改成 rpx
  5.   1 设计稿 750x
  6.     750 px = 750 rpx 
  7.     1 px = 1 rpx
  8.   2 把屏幕宽度 改成 375px
  9.     375 px = 750 rpx
  10.     1 px = 2rpx
  11.     1rpx = 0.5px
  12. 3 存在一个设计稿 宽度 414 或者 未知 page 
  13.   1 设计稿 page 存在一个元素 宽度 100px
  14.   2 拿以上的需求 去实现 不同宽度的页面适配 
  15.  
  16.   page px = 750 rpx
  17.   1 px = 750 rpx / page
  18.   100 px = 750 rpx * 100 / page 
  19.   假设  page =  375px
  20. 4 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性
  21.   1 750 和 rpx 中间不要留空格
  22.   2 运算符的两边也不要留空格
  23.  */
  25.  view{
  26.    /* width: 200rpx; */
  27.    height: 200rpx;
  28.    font-size: 40rpx;
  29.    background-color: aqua;
  30.   /* 以下代码写法是错误  */
  31.   /*  width:750 rpx * 100 / 375 ;  */
  32.   width:calc(750rpx * 100 / 375);
  33.  }

 wxss 引入

1.工程目录下创建 样式文件夹mini-01\styles

2.创建样式文件

common.wxss

  1. view{
  2.   color: aqua;
  3.   font-size: 100px;
  4. }

 wxss

  1. /* 
  2. 1 引入的 代码 是通过 @import 来引入
  3. 2 路径 只能写相对路径
  4.  */
  5.  @import "../../styles/common.wxss";

 

 

四.  

 wxss

  1. /* 1 定义less变量 */
  2. text {
  3.   /* 2 使用变量 */
  4.   color: yellow;
  5. }
  6. view .vie1 text {
  7.   color: red;
  8. }
  9. /* 导入 */
  10. view {
  11.   color: green;
  12. }
  13. .main {
  14.   /* 
  15.   1 less中 支持 两种注释  多行  单行
  16.   2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
  17.    */
  18.   /* font-size: 200px; */
  19. }

less

  1. /* 1 定义less变量 */
  2. @color:yellow;
  3. text{
  4.   /* 2 使用变量 */
  5.   color:@color;
  6. }
  7.  
  8. view{
  9.   .vie1{
  10.     text{
  11.       color: red;
  12.     }
  13.   }
  14. }
  15.  
  16. /* 导入 */
  17. @import "../../styles/reset.less";
  18. view{
  19.   color: @themeColor;
  20. }
  21. .main{
  22.   /* 
  23.   1 less中 支持 两种注释  多行  单行
  24.   2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！
  25.    */
  26.   /* font-size: 200px; */
  27.   // font-size: 400px;
  28. }

 

reset.less

@themeColor:green;
 

五.  长按文字复制,对文本内容 进行 解码  wxml

  1. <!-- 
  2.   1 长按文字复制 selectable
  3.   2 对文本内容 进行 解码
  4.  -->
  5. <text selectable decode>
  6.   text &nbsp; 123 &lt;
  7. </text>
uploading.4e448015.gif转存失败 重新上传 取消

js

  1. // pages/demo08/demo08.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.  
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.  
  16.   },
  17.  
  18.   /**
  19.    * 生命周期函数--监听页面初次渲染完成
  20.    */
  21.   onReady: function () {
  22.  
  23.   },
  24.  
  25.   /**
  26.    * 生命周期函数--监听页面显示
  27.    */
  28.   onShow: function () {
  29.  
  30.   },
  31.  
  32.   /**
  33.    * 生命周期函数--监听页面隐藏
  34.    */
  35.   onHide: function () {
  36.  
  37.   },
  38.  
  39.   /**
  40.    * 生命周期函数--监听页面卸载
  41.    */
  42.   onUnload: function () {
  43.  
  44.   },
  45.  
  46.   /**
  47.    * 页面相关事件处理函数--监听用户下拉动作
  48.    */
  49.   onPullDownRefresh: function () {
  50.  
  51.   },
  52.  
  53.   /**
  54.    * 页面上拉触底事件的处理函数
  55.    */
  56.   onReachBottom: function () {
  57.  
  58.   },
  59.  
  60.   /**
  61.    * 用户点击右上角分享
  62.    */
  63.   onShareAppMessage: function () {
  64.  
  65.   }
  66. })
uploading.4e448015.gif转存失败 重新上传 取消

六.  图片 wxml

  1. <!-- 
  2.   image 图片标签
  3.   1 src 指定要加载的图片的路径
  4.     图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  5.   2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
  6.     1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
  7.     2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
  8.     3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
  9.     4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
  10.     5 bottom。。 类似以前的backgroud-position 
  11.   3 小程序当中的图片 直接就支持 懒加载  lazy-load
  12.     1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 
  13.  -->
  14.  <image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />
uploading.4e448015.gif转存失败 重新上传 取消

 

wxss

  1. image{
  2.   box-sizing: border-box;
  3.   border: 1px solid red;
  4.  
  5.   width: 300px;
  6.   height: 200px;
  7. }

七. 轮播图  wxml

  1. <!-- 
  2.   1 轮播图外层容器 swiper
  3.   2 每一个轮播项 swiper-item
  4.   3 swiper标签 存在默认样式
  5.     1 width 100%
  6.     2 height 150px    image 存在默认宽度和高度 320 * 240 
  7.     3 swiper 高度 无法实现由内容撑开 
  8.   4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
  9.     原图的宽度和高度  1125 * 352 px
  10.     swiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度
  11.     swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
  12.     height: 100vw * 352 /  1125
  13.   5 autoplay 自动轮播
  14.   6 interval 修改轮播时间
  15.   7 circular 衔接轮播
  16.   8 indicator-dots 显示 指示器 分页器 索引器 
  17.   9 indicator-color 指示器的未选择的颜色 
  18.   10 indicator-active-color 选中的时候的指示器的颜色 
  19.  -->
  20. <swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
  21.     <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
  22.     <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
  23.     <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
  24. </swiper>
uploading.4e448015.gif转存失败 重新上传 取消

 

八.  页面 跳转wxml

  1. <!-- 
  2.   导航组件 navigator
  3.   0 块级元素 默认会换行  可以直接加宽度和高度 
  4.   1 url 要跳转的页面路径  绝对路径 相对路径
  5.   2 target 要跳转到当前的小程序 还是其他的小程序的页面
  6.     self 默认值 自己 小程序的页面 
  7.     miniProgram 其他的小程序的页面
  8.   3 open-type 跳转的方式
  9.     1 navigate 默认值 	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
  10.     2 redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
  11.     3 switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  12.     4 reLaunch	关闭所有页面，打开到应用内的某个页面
  13.  -->
  14.  
  15.  <navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
  16.  <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
  17.  <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
  18.  <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
  19.  <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator>
uploading.4e448015.gif转存失败 重新上传 取消

 

九.   富文本标签 wxml

  1. <!-- 
  2.   rich-text 富文本标签
  3.   1 nodes属性来实现
  4.     1 接收标签字符串 
  5.     2 接收对象数组 
  6.  -->
  7.  <rich-text nodes="{{html}}"></rich-text>
uploading.4e448015.gif转存失败 重新上传 取消

js

  1. // pages/demo12/demo12.js
  2. Page({
  3.   data: {
  4.     // 1 标签字符串 最常用的
  5.     // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'
  6.     // 2 对象数组
  7.     html:[
  8.       {
  9.         // 1 div标签 name属性来指定
  10.         name:"div",
  11.         // 2 标签上有哪些属性
  12.         attrs:{
  13.           // 标签上的属性 class  style
  14.           class:"my_div",
  15.           style:"color:red;"
  16.         },
  17.         // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
  18.         children:[
  19.           {
  20.             name:"p",
  21.             attrs:{},
  22.             // 放文本
  23.             children:[
  24.               {
  25.                 type:"text",
  26.                 text:"hello"
  27.               }
  28.             ]
  29.           }
  30.         ]
  31.       }
  32.     ]
  33.   }
  34. })
uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消

 

 

十.   button 按钮开发 wxml

  1.  
  2. <!-- 
  3.   button 标签
  4.   1 外观的属性
  5.     1 size 控制按钮的大小
  6.       1 default 默认大小
  7.       2 mini 小尺寸
  8.     2 type 用来控制按钮的颜色
  9.       1 default 灰色
  10.       2 primary 绿色
  11.       3 warn 红色
  12.     3 plain  按钮是否镂空，背景色透明
  13.     4 loading 文字前显示正在等待图标
  14.  -->
  15.  <button>默认按钮</button>
  16.  <button size="mini">  mini 默认按钮</button>
  17.  <button type="primary"> primary 按钮</button> 
  18.  <button type="warn"> warn 按钮</button> 
  19.  <button type="warn" plain> plain 按钮</button> 
  20.  <button type="primary" loading> loading 按钮</button> 
  21.  
  22.  <!-- 
  23.  
  24.   button 开发能力
  25.   open-type：
  26.   1 contact 直接打开  客服对话功能  需要在微信小程序的后台配置   只能够通过真机调试来打开 
  27.   2 share 转发当前的小程序 到微信朋友中   不能把小程序 分享到 朋友圈 
  28.   3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用  不是企业的小程序账号 没有权限来获取用户的手机号码 
  29.     1 绑定一个事件 bindgetphonenumber 
  30.     2 在事件的回调函数中  通过参数来获取信息 
  31.     3 获取到的信息  已经加密过了 
  32.       需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
  33.   4 getUserInfo 获取当前用户的个人信息
  34.     1 使用方法 类似 获取用户的手机号码
  35.     2 可以直接获取 不存在加密的字段 
  36.   5 launchApp 在小程序当中 直接打开 app
  37.     1 需要现在 app中 通过app的某个链接 打开 小程序
  38.     2 在小程序 中 再通过 这个功能 重新打开 app
  39.     3 找到 京东的app 和 京东的小程序  
  40.   6 openSetting 打开小程序内置的 授权页面
  41.     1 授权页面中 只会出现 用户曾经点击过的 权限 
  42.   7 feedback 打开 小程序内置的 意见反馈页面 
  43.     1 只能够通过真机调试来打开 
  44.  
  45.   -->
  46. <button open-type="contact">contact</button>
  47. <button open-type="share">share</button>
  48. <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
  49. <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
  50. <button open-type="launchApp">launchApp</button>
  51. <button open-type="openSetting">openSetting</button>
  52. <button open-type="feedback">feedback</button>
uploading.4e448015.gif转存失败 重新上传 取消

js

  1. // pages/demo13/demo13.js
  2. Page({
  3.   // 获取用户的手机号码信息
  4.   getPhoneNumber(e){
  5.     console.log(e);
  6.   },
  7.   // 获取用户个人信息
  8.   getUserInfo(e){
  9.     console.log(e);
  10.   }
  11. })
uploading.4e448015.gif转存失败 重新上传 取消

十一. 小程序中的字体图标 icon wxml

  1.  
  2. <!-- 
  3.   小程序中的字体图标
  4.   1 type 图标的类型
  5.     success|success_no_circle|info|warn|waiting|cancel|download|search|clear
  6.   2 size 大小 
  7.   3 color 图标的颜色
  8.  -->
  9. <icon  type="cancel" size="60" color="#0094ff"> </icon>
uploading.4e448015.gif转存失败 重新上传 取消

 

十二.  radio 单选框 wxml

  1.  
  2. <!-- 
  3.   radio 单选框
  4.   1 radio标签 必须要和 父元素 radio-group来使用
  5.   2 value 选中的单选框的值 
  6.   3 需要给 radio-group 绑定 change事件 
  7.   4 需要在页面中显示 选中的值
  8.  -->
  9.  <radio-group bindchange="handleChange">
  10.    <radio color="red" value="male">男</radio>
  11.    <radio color="red" value="female" >女</radio>
  12.  </radio-group>
  13.  
  14.  <view>您选中的是:{{gender}}</view>
uploading.4e448015.gif转存失败 重新上传 取消

js

  1. // pages/demo15/demo15.js
  2. Page({
  3.   data: {
  4.     gender: ""
  5.   },
  6.   handleChange(e){
  7.     // 1 获取单选框中的值
  8.     let gender=e.detail.value;
  9.     // 2 把值 赋值给 data中的数据
  10.     this.setData({
  11.       // gender:gender
  12.       gender
  13.     })
  14.   }
  15. })
uploading.4e448015.gif转存失败 重新上传 取消

九.  复选框  wxml

  1. <view>
  2.   <checkbox-group bindchange="handleItemChange">
  3.     <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
  4.       {{item.name}}
  5.     </checkbox>
  6.  
  7.   </checkbox-group>
  8.   <view>
  9.     选中的水果:{{checkedList}}
  10.   </view>
  11. </view>
uploading.4e448015.gif转存失败 重新上传 取消

js

  1. // pages/demo16/demo16.js
  2. Page({
  3.   data: {
  4.     list:[
  5.       {
  6.         id:0,
  7.         name:"馃崕",
  8.         value:"apple"
  9.       },
  10.       {
  11.         id:1,
  12.         name:"馃崌",
  13.         value:"grape"
  14.       },
  15.       {
  16.         id:2,
  17.         name:"馃崒",
  18.         value:"bananer"
  19.       }
  20.     ],
  21.     checkedList:[]
  22.   },
  23.   // 澶嶉€夋鐨勯€変腑浜嬩欢
  24.   handleItemChange(e){
  25.     // 1 鑾峰彇琚€変腑鐨勫閫夋鐨勫€?    const checkedList=e.detail.value;
  26.     // 2 杩涜璧嬪€?    this.setData({
  27.       checkedList
  28.     })
  29.   }
  30. })
uploading.4e448015.gif转存失败 重新上传 取消

十三. 自定义组件及传递数据  demo17.wxml

1.同级目录下右键点击新建目录 创建components->及Tabs目录

mini-01\components\Tabs

 

2. 在Tabs目录下 右键点击component 新建 component

3.新建完成 

4. Tabs.js

  1. // components/Tabs.js
  2. Component({
  3.   /**
  4.    * 里面存放的是 要从父组件中接收的数据
  5.    */
  6.   properties: {
  7.     // 要接收的数据的名称
  8.     // aaa:{
  9.     //   // type  要接收的数据的类型 
  10.     //   type:String,
  11.     //   // value  默认值
  12.     //   value:""
  13.     // }
  14.     tabs:{
  15.       type:Array,
  16.       value:[]
  17.     }
  18.   },
  19.  
  20.   /**
  21.    * 组件的初始数据
  22.    */
  23.   data: {
  24.     // tabs
  25.   },
  26.   /* 
  27.   1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  28.   2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
  29.    */
  30.  
  31.  
  32.   methods: {
  33.     hanldeItemTap(e){
  34.       /* 
  35.       1 绑定点击事件  需要在methods中绑定
  36.       2 获取被点击的索引 
  37.       3 获取原数组 
  38.       4 对数组循环
  39.         1 给每一个循环性 选中属性 改为 false
  40.         2 给 当前的索引的 项 添加激活选中效果就可以了！！！
  41.  
  42.        
  43.        5 点击事件触发的时候 
  44.           触发父组件中的自定义事件 同时传递数据给  父组件  
  45.           this.triggerEvent("父组件自定义事件的名称",要传递的参数)
  46.        */
  47.  
  48.       //  2 获取索引
  49.       const {index}=e.currentTarget.dataset;
  50.       // 5 触发父组件中的自定义事件 同时传递数据给  
  51.       this.triggerEvent("itemChange",{index});
  52.       // 3 获取data中的数组
  53.       // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
  54.       // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
  55.       // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
  56.       // 不要直接修改 this.data.数据 
  57.       // let {tabs}=this.data;
  58.       // let tabs=this.data;
  59.       // 4 循环数组
  60.       // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
  61.       // tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
  62.  
  63.       // this.setData({
  64.         // tabs
  65.       // })
  66.     }
  67.   }
  68. })

 

5.Tabs.json

  1. {
  2.   "component": true,
  3.   "usingComponents": {}
  4. }

 

6.Tabs.wxml

  1.  
  2. <view class="tabs">
  3.   <view class="tabs_title">
  4.     <!-- <view class="title_item active">首页</view>
  5.     <view class="title_item">原创</view>
  6.     <view class="title_item">分类</view>
  7.     <view class="title_item">关于</view> -->
  8.  
  9.     <view 
  10.     wx:for="{{tabs}}"
  11.     wx:key="id"
  12.     class="title_item {{item.isActive?'active':''}}"
  13.     bindtap="hanldeItemTap"
  14.     data-index="{{index}}"
  15.     >
  16.     {{item.name}}
  17.   </view>
  18.   </view>
  19.   <view class="tabs_content">
  20.     <!-- 
  21.       slot 标签 其实就是一个占位符 插槽
  22.       等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
  23.       就会替换 slot 插槽的位置 
  24.      -->
  25.     <slot></slot>
  26.   </view>
  27. </view>

 

7.Tabs.wxss

  1. .tabs{}
  2. .tabs_title{
  3.   display: flex;
  4.   padding: 10rpx 0;
  5. }
  6. .title_item{
  7.   flex: 1;
  8.   display: flex;
  9.   justify-content: center;
  10.   align-items: center;
  11. }
  12. .active{
  13.   color:red;
  14.   border-bottom: 5rpx solid currentColor;
  15. }
  16. .tabs_content{}

 

8. 在需要使用的页面目录中 demo17.json 引入组件

  1. {
  2.   "usingComponents": {
  3.     "Tabs":"../../components/Tabs/Tabs"
  4.   }
  5. }

 

9. demo17.wxml 引用自定义的组件 <Tabs> <T/abs>

  1. <!-- 
  2.   1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
  3.     1 在子组件上进行接收
  4.     2 把这个数据当成是data中的数据直接用即可
  5.   2 子向父传递数据 通过事件的方式传递
  6.     1 在子组件的标签上加入一个 自定义事件
  7.   
  8.  -->
  9. <Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
  10.  
  11. <block wx:if="{{tabs[0].isActive}}">0 </block>
  12. <block wx:elif="{{tabs[1].isActive}}">1 </block>
  13. <block wx:elif="{{tabs[2].isActive}}">2 </block>
  14. <block wx:else>3</block>
  15.  
  16. </Tabs>
uploading.4e448015.gif转存失败 重新上传 取消

demo17.js

  1. // pages/demo17/demo18.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.  
  9.     tabs: [
  10.       {
  11.         id: 0,
  12.         name: "首页",
  13.         isActive: true
  14.       },
  15.       {
  16.         id: 1,
  17.         name: "原创",
  18.         isActive: false
  19.       }
  20.       ,
  21.       {
  22.         id: 2,
  23.         name: "分类",
  24.         isActive: false
  25.       }
  26.       ,
  27.       {
  28.         id: 3,
  29.         name: "关于",
  30.         isActive: false
  31.       }
  32.     ]
  33.  
  34.   },
  35.  
  36.   // 自定义事件 用来接收子组件传递的数据的
  37.   handleItemChange(e) {
  38.     // 接收传递过来的参数
  39.     const { index } = e.detail;
  40.     let { tabs } = this.data;
  41.     tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
  42.     this.setData({
  43.       tabs
  44.     })
  45.   }
  46. })
uploading.4e448015.gif转存失败 重新上传 取消

 父组件向子组件传递数据:

子组件通过触发父组件事件来传递数据;

 

十四.  生命周期 wxml

  1. <!--pages/demo18/demo18.wxml-->
  2. <text>pages/demo18/demo18.wxml</text>
  3.  
  4. <navigator url="/pages/demo17/demo17" open-type="navigate">
  5.   demo17
  6. </navigator>
  7.   
  8. <navigator url="/pages/demo17/demo17" open-type="redirect">
  9.   demo17 redirect
  10. </navigator>
  11. <view>1</view>
  12. <view>2</view>
  13. <view>3</view>
  14. <view>4</view>
  15. <view>5</view>
  16. <view>6</view>
  17. <view>7</view>
  18. <view>8</view>
  19. <view>9</view>
  20. <view>10</view>
  21. <view>11</view>
  22. <view>12</view>
  23. <view>13</view>
  24. <view>14</view>
  25. <view>15</view>
  26. <view>16</view>
  27. <view>17</view>
  28. <view>18</view>
  29. <view>19</view>
  30. <view>20</view>
  31. <view>21</view>
  32. <view>22</view>
  33. <view>23</view>
  34. <view>24</view>
  35. <view>25</view>
  36. <view>26</view>
  37. <view>27</view>
  38. <view>28</view>
  39. <view>29</view>
  40. <view>30</view>
  41. <view>31</view>
  42. <view>32</view>
  43. <view>33</view>
  44. <view>34</view>
  45. <view>35</view>
  46. <view>36</view>
  47. <view>37</view>
  48. <view>38</view>
  49. <view>39</view>
  50. <view>40</view>
  51. <view>41</view>
  52. <view>42</view>
  53. <view>43</view>
  54. <view>44</view>
  55. <view>45</view>
  56. <view>46</view>
  57. <view>47</view>
  58. <view>48</view>
  59. <view>49</view>
  60. <view>50</view>
  61. <view>51</view>
  62. <view>52</view>
  63. <view>53</view>
  64. <view>54</view>
  65. <view>55</view>
  66. <view>56</view>
  67. <view>57</view>
  68. <view>58</view>
  69. <view>59</view>
  70. <view>60</view>
  71. <view>61</view>
  72. <view>62</view>
  73. <view>63</view>
  74. <view>64</view>
  75. <view>65</view>
  76. <view>66</view>
  77. <view>67</view>
  78. <view>68</view>
  79. <view>69</view>
  80. <view>70</view>
  81. <view>71</view>
  82. <view>72</view>
  83. <view>73</view>
  84. <view>74</view>
  85. <view>75</view>
  86. <view>76</view>
  87. <view>77</view>
  88. <view>78</view>
  89. <view>79</view>
  90. <view>80</view>
  91. <view>81</view>
  92. <view>82</view>
  93. <view>83</view>
  94. <view>84</view>
  95. <view>85</view>
  96. <view>86</view>
  97. <view>87</view>
  98. <view>88</view>
  99. <view>89</view>
  100. <view>90</view>
  101. <view>91</view>
  102. <view>92</view>
  103. <view>93</view>
  104. <view>94</view>
  105. <view>95</view>
  106. <view>96</view>
  107. <view>97</view>
  108. <view>98</view>
  109. <view>99</view>
  110. <view>100</view>

 

uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消

 

 

js

  1. // pages/demo18/demo18.js
  2. Page({
  3.  
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  8.  
  9.   },
  10.  
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.     console.log("onLoad");
  16.     // onLoad发送异步请求来初始化页面数据 
  17.   },
  18.   /**
  19.    * 生命周期函数--监听页面显示
  20.    */
  21.   onShow: function () {
  22.     console.log("onShow");
  23.   },
  24.   /**
  25.     * 生命周期函数--监听页面初次渲染完成
  26.     */
  27.   onReady: function () {
  28.     console.log("onReady");
  29.   },
  30.   /**
  31.    * 生命周期函数--监听页面隐藏
  32.    */
  33.   onHide: function () {
  34.     console.log("onHide");
  35.   },
  36.  
  37.   /**
  38.    * 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示 
  39.    * 
  40.    */
  41.   onUnload: function () {
  42.     console.log("onUnload");
  43.   },
  44.  
  45.   /**
  46.    * 页面相关事件处理函数--监听用户下拉动作
  47.    */
  48.   onPullDownRefresh: function () {
  49.     console.log("onPullDownRefresh");
  50.     // 页面的数据 或者效果 重新 刷新
  51.   },
  52.  
  53.   /**
  54.    * 页面上拉触底事件的处理函数
  55.    * 需要让页面 出现上下滚动才行 
  56.    */
  57.   onReachBottom: function () {
  58.     console.log("onReachBottom");
  59.     // 上拉加载下一页数据 
  60.   },
  61.  
  62.   /**
  63.    * 用户点击右上角分享
  64.    */
  65.   onShareAppMessage: function () {
  66.     console.log("onShareAppMessage");
  67.   },
  68.   /**
  69.    * 页面滚动 就可以触发 
  70.    */
  71.   onPageScroll(){
  72.     console.log("onPageScroll");
  73.   },
  74.   /**
  75.    * 页面的尺寸发生改变的时候 触发
  76.    * 小程序 发生了 横屏竖屏 切换的时候触发 
  77.    */
  78.   onResize(){
  79.     console.log("onResize");
  80.   },
  81.   /**
  82.    * 1 必须要求当前页面 也是tabbar页面
  83.    * 2 点击的自己的tab item的时候才触发
  84.    */
  85.   onTabItemTap(){
  86.     console.log("onTabItemTap");
  87.   }
  88. })
uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消

.json  开启横屏竖屏开发

  1. {
  2.     "pageOrientation": "auto"
  3. }
uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消 uploading.4e448015.gif转存失败 重新上传 取消

全局文件

App.js

  1. //app.js
  2. App({
  3.   //  1 应用第一次启动的就会触发的事件  
  4.   onLaunch() {
  5.     //  在应用第一次启动的时候 获取用户的个人信息 
  6.     // console.log("onLaunch");
  7.     // aabbcc
  8.  
  9.     // js的方式来跳转 不能触发 onPageNotFound
  10.     // wx.navigateTo({
  11.     //   url: '/11/22/33'
  12.     // });
  13.       
  14.   },
  15.  
  16.   // 2 应用 被用户看到 
  17.   onShow(){
  18.     // 对应用的数据或者页面效果 重置 
  19.     // console.log("onShow");
  20.   },
  21.   // 3 应用 被隐藏了 
  22.   onHide(){
  23.     // 暂停或者清除定时器 
  24.     // console.log("Hide");
  25.   },
  26.   // 4 应用的代码发生了报错的时候 就会触发
  27.   onError(err){
  28.     // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送后台去
  29.     // console.log("onError");
  30.     // console.log(err);
  31.   },
  32.   // 5 页面找不到就会触发 
  33.   //  应用第一次启动的时候，如果找不到第一个入口页面 才会触发
  34.   onPageNotFound(){
  35.     // 如果页面不存在了 通过js的方式来重新跳转页面 重新跳到第二个首页
  36.     // 不能跳到tabbar页面  导航组件类似  
  37.     wx.navigateTo({
  38.       url: '/pages/demo09/demo09' 
  39.     });  
  40.       
  41.     // console.log("onPageNotFound");
  42.   }
  43. })

app.json

  1. {
  2.   "pages": [  
  3.     "pages/demo18/demo18",
  4.     "pages/demo17/demo17",       
  5.     "pages/demo16/demo16",             
  6.     "pages/demo15/demo15",    
  7.     "pages/demo14/demo14",  
  8.     "pages/demo13/demo13",
  9.     "pages/demo12/demo12",
  10.     "pages/demo11/demo11",     
  11.     "pages/demo10/demo10",    
  12.     "pages/demo09/demo09",  
  13.     "pages/demo08/demo08",   
  14.     "pages/demo07/demo07",   
  15.     "pages/demo06/demo06",    
  16.     "pages/demo05/demo05",   
  17.     "pages/demo04/demo04",   
  18.     "pages/demo03/demo03",   
  19.     "pages/demo01/demo01", 
  20.     "pages/index/index",  
  21.     "pages/img/img",
  22.     "pages/mine/mine", 
  23.     "pages/search/search",
  24.     "pages/demo02/demo02", 
  25.     "pages/logs/logs"
  26.   ],
  27.   "window": {
  28.     "backgroundTextStyle": "dark",
  29.     "navigationBarBackgroundColor": "#0094ff",
  30.     "navigationBarTitleText": "我的应用",
  31.     "navigationBarTextStyle": "black",
  32.     "enablePullDownRefresh": true,
  33.     "backgroundColor": "yellow"
  34.   },
  35.   "tabBar": {
  36.     "list": [
  37.       {
  38.         "pagePath": "pages/index/index",
  39.         "text": "首页",
  40.         "iconPath": "icon/_home.png",
  41.         "selectedIconPath": "icon/home.png"
  42.       },
  43.       {
  44.         "pagePath": "pages/img/img",
  45.         "text": "图片",
  46.         "iconPath": "icon/_img.png",
  47.         "selectedIconPath": "icon/img.png"
  48.       },
  49.       {
  50.         "pagePath": "pages/mine/mine",
  51.         "text": "我的",
  52.         "iconPath": "icon/_my.png",
  53.         "selectedIconPath": "icon/my.png"
  54.       },
  55.       {
  56.         "pagePath": "pages/search/search",
  57.         "text": "搜索",
  58.         "iconPath": "icon/_search.png",
  59.         "selectedIconPath": "icon/search.png"
  60.       },
  61.       {
  62.         "pagePath": "pages/demo18/demo18",
  63.         "text": "demo18",
  64.         "iconPath": "icon/_search.png",
  65.         "selectedIconPath": "icon/search.png"
  66.       }
  67.     ],
  68.     "color":"#0094ff",
  69.     "selectedColor":"#ff9400",
  70.     "backgroundColor":"#ff5533",
  71.     "position":"top"
  72.   },
  73.   "sitemapLocation": "sitemap.json"
  74. }

 

app.wxss

  1. /**app.wxss**/
  2. .container {
  3.   height: 100%;
  4.   display: flex;
  5.   flex-direction: column;
  6.   align-items: center;
  7.   justify-content: space-between;
  8.   padding: 200rpx 0;
  9.   box-sizing: border-box;
  10. }

 

project.config.json

  1. {
  2. 	"description": "项目配置文件",
  3. 	"packOptions": {
  4. 		"ignore": []
  5. 	},
  6. 	"setting": {
  7. 		"urlCheck": true,
  8. 		"es6": false,
  9. 		"postcss": true,
  10. 		"minified": true,
  11. 		"newFeature": true,
  12. 		"autoAudits": false,
  13. 		"checkInvalidKey": true
  14. 	},
  15. 	"compileType": "miniprogram",
  16. 	"libVersion": "2.7.7",
  17. 	"appid": "wxad258ddc70c8662c",
  18. 	"projectname": "mini-01",
  19. 	"debugOptions": {
  20. 		"hidedInDevtools": []
  21. 	},
  22. 	"isGameTourist": false,
  23. 	"simulatorType": "wechat",
  24. 	"simulatorPluginLibVersion": {},
  25. 	"condition": {
  26. 		"search": {
  27. 			"current": -1,
  28. 			"list": []
  29. 		},
  30. 		"conversation": {
  31. 			"current": -1,
  32. 			"list": []
  33. 		},
  34. 		"plugin": {
  35. 			"current": -1,
  36. 			"list": []
  37. 		},
  38. 		"game": {
  39. 			"currentL": -1,
  40. 			"list": []
  41. 		},
  42. 		"miniprogram": {
  43. 			"current": 0,
  44. 			"list": [
  45. 				{
  46. 					"id": -1,
  47. 					"name": "不存在的页面",
  48. 					"pathName": "pages/de333mo17/de3333mo17",
  49. 					"query": "",
  50. 					"scene": null
  51. 				}
  52. 			]
  53. 		}
  54. 	}
  55. }

sitemap.json

  1. {
  2.   "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  3.   "rules": [{
  4.   "action": "allow",
  5.   "page": "*"
  6.   }]
  7. }

 

.json  开启横屏竖屏开发

 "pageOrientation": "auto"

 

 

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号