wx小程序制作(1)

小程序全局配置

app.json

pages≈vue中导入页面

{
  "pages": [   //路径页面  在开发者工具中Ctrl+S保存后会自动在相应目录下创建该文件
    "pages/index/index",
    "pages/img/img",
    "pages/mine/mine",
    "pages/search/search",
    "pages/logs/logs"  
  ],
  "window": {  //导航栏标题  
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true,//下拉刷新
    "backgroundColorTop": "yellow"//
  },
  "tabBar": {  //导航栏配置  最多5个
    "list": [{
      "pagePath": "pages/index/index", //页面路径
      "text": "首页",//标题
      "iconPath": "icon/_home.png",//未选中时图标
      "selectedIconPath": "icon/home.png"//选中时图标
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "图片",
      "iconPath": "icon/_my.png",
      "selectedIconPath": "icon/my.png"
    },
    {
      "pagePath": "pages/search/search",
      "text": "图片",
      "iconPath": "icon/_search.png",
      "selectedIconPath": "icon/search.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

循环数组或对象

//js中数据
Page({
  data:{
    user:{
      name:'zs',
      age:12
    },
    list:[{
      id:0,
      name:'猪八戒'
    },
    {
      id:1,
      name:'天蓬元帅'
    },]
  }
})
//页面配置
//<text>==<span>       <view>==<div>
//循环数组   
// wx:for-item='循环项的名称' wx:for-index='循环项的索引'  多层循环时不要重名
// 当为单循环时 wx:for-item='' wx:for-index='' 可省略 因为这是默认的
// 当数组为普通数组时如[1,2,3] 可设wx:key='*this'   *this为循环项
<view wx:for='list' wx:for-item='item' wx:for-index='index' wx:key='id'>
   <text>索引为:{{index}}</text>
   <text>名为:{{item.name}}</text>
</view>
//循环数组
//wx:for-item='对象的值' wx:for-index='对象的属性'
<view wx:for="{{user}}" wx:for-item="val" wx:for-index="key" wx:key="name">
//该对象中name为唯一字符串 所以可以作key值
        {{key}}  {{val}}
</view>

block标签  只在代码段中显示  渲染到页面时该标签会移除 

<block wx:for="{{user}}" wx:for-item="val" wx:for-index="attr" wx:key="name">
       <view>{{attr}}  {{val}}<view>
</block>

  包裹标签为block时

 包裹标签为view时

 

 綁定事件

input绑定事件 

//bindinput  
<input type="text" bindinput="handinput" />   //input标签结尾要+  / 
//js中
   
Page({
  data:{
    msg:0,
  },
  handinput(e){
      this.setData({
        msg:e.detail.value//将input中输入的值赋给msg
      })
    },
})

click事件绑定

//在dataset中绑定名为item的属性
 <button bindtap='add' data-item='{{1}}'>+</button>  
 <button bindtap='add' data-item='{{-1}}'>-</button>

Page({
  data:{
    msg:0,
  },
  add(e:any){   //在没有传参的情况下默认接收的为触发事件的元素   e=触发事件的元素
   const a:number=e.currentTarget.dataset.item//小程序中不能直接进行传参
    this.setData({
      msg:Number(this.data.msg)+a
  })
  }
})

新建组件

在wx开发者工具相应文件夹处右击选择新建Component 

如下为 在Tabs文件夹右击选择新建Component    

输入Tabs回车会自动创建如下4个文件 

 Tabs.json文件中会存在component属性值为true

a.js文件存在3个属性

 使用自定义组件

 使用组件时要在json文件的usingComponents中添加该组件 属性名=标签名  值=路径

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

渲染到页面中

<Tabs></Tabs>

父向子传值

//父 list为子组件要接收的属性名    '{{list}}'=在js  data中定义的数值  
<Tabs list='{{list}}'></Tabs>
//子  使用js文件的properties属性来接受
properties: {
       list:{
            type:''   //接受的类型
            value:''  // 默认值
        }
  },

子传父

//父
//wxml
<Tabs list='{{list}}' bindupdatalist='updatalist'></Tabs>
//bind 后的为子组件通过this.triggerEvent接收的方法名字  'updatalist'为父组件js中定义的方法
//js  
Page({
  data:{
    list:[
      {
        id:0,
        name:'首页',
        isActive:true
      },
      {
        id:1,
        name:'原创',
        isActive:false
      },
      {
        id:2,
        name:'分类',
        isActive:false
      },
      {
        id:3,
        name:'关于',
        isActive:false
      }
    ]
  },
  updatalist(e:any){
    num=e.detail.num
    let list=[...this.data.list] //复制一个新数组  
      list.map((item,index)=>index===num?item.isActive=true:item.isActive=false)
      this.setData({
        list
      })
  }
})
//子
methods:{
    handlerclick(e:any){ 
      let {num}=e.target.dataset
      this.triggerEvent('updatalist',{num})
    //通过this.triggerEvent('父元素绑定到标签上的方法名',要传递参数)来触发父组件的相关方法
    },
}

 swiper轮播图的使用

<view>
  <swiper>//轮播图容器
    <swiper-item> //轮播项
        //widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
      <image  mode="widthFix" src='../../icon/1.png'></image>
    </swiper-item>
    <swiper-item>
      <image  mode="widthFix" src='../../icon/1.png'></image>
    </swiper-item>
    <swiper-item>
      <image mode="widthFix"  src='../../icon/1.png'></image>
    </swiper-item>
  </swiper>
</view>

解决swiper与图片大小不匹配问题

swiper{
  width: 100vw;  //设置轮播图宽为全屏
/*因为轮播图容器和轮播内容大小应相等  所以轮播图宽/轮播图高=图片原宽度/图片原宽度  以此公式通过calc()来求轮播图高  注图片为大小为图片原来的大小而不是image标签的大小*/
  height: calc(100vw * 472 / 846);  //calc(+ - * /)前后必须有空格 
}
image{
  width: 100%;//使image与轮播图容器大小相同
  height: 100%;
}

异步请求 request（{}）

//安装小城西插件后 可通过wx-request快速创建如下参数   其余可自行查文档
//data-responseType :''中的均为默认参数可省略
wx.request({
    url: '',  //请求服务器地址
    data: {}, //请求的参数
    header: {'content-type':'application/json'},//请求头
    method: 'GET',//请求方法
    dataType: 'json',//返回的数据格式
    responseType: 'text',//相应的数据类型
    success: (result)=>{//成功回调
      
    },
    fail: ()=>{},//失败回调
    complete: ()=>{}//成功，失败都执行
  });
  }

封装一个Promise方便request复用

//新建一个js文件 
export default request=(parms)=>{ //向外导出回调函数request 
  return new Promise((resolve,regect)=>{  
//resolve成功时返回的值   regect失败时返回的值
       wx.request({
        ...parms,
        success: (result) => {
          resolve(result)//成功时返回result
        },
        fail: (err) => {
          regect(err) //失败时返回错误信息
        },
      });
        
  })
}
//调用的js文件
    request({//包含要传递的属性 此次仅传递服务器地址其他保持默认
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'
    }).then((data)=>{
      this.setData({
        swiperlist:data.data.message//更改data中的值
      })
    })

缓存数据

    //存储数据到本地缓存中 'key'为属性名  {}中存放数据  也可以不为对象格式
    wx.setStorageSync('key', {});
    //从缓存中读取数据  'key'为要查找的属性名
    wx.getStorageSync('key');