1-------------基础课程

雨兮雨

于 2021-02-21 00:21:27 发布

阅读量697

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_45448576/article/details/113887757

版权

微信小程序专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、
.js，逻辑层；
.json配置层；
.wxss样式层。
ctrl+s编译运行
2、创建文件夹news
在app.json里，加入语句：

{
  "pages":[
   
    "pages/index/index",
    "pages/logs/logs",
    "pages/news/news"//路径
    
  ],

3、图片

<image src="https://cn.bing.com/images/search?view=detailV2&ccid=67ItHHsV&id=A136A2C3D23E4137E0EA50B4AF9FCB094236D6C4&thid=OIP.67ItHHsVFud15TZSOMl4NgHaLH&mediaurl=https%3a%2f%2fth.bing.com%2fth%2fid%2fRebb22d1c7b1516e775e5365238c97836%3frik%3dxNY2QgnLn6%252b0UA%26riu%3dhttp%253a%252f%252fwww.photophoto.cn%252fm10%252f018%252f049%252f0180490005.jpg%26ehk%3dhVlApuePBp2bNkzjuL%252buNXLhxtXlRdlg1uEj%252bU2m9yg%253d%26risl%3d%26pid%3dImgRaw&exph=900&expw=600&q=%e7%8b%97%e7%8b%97&simid=608055275411343601&ck=DAF0AFBE06D7C78E442583C8160D6560&selectedIndex=10&FORM=IRPRST"></image>
  <image src="/images/one.gif" show-menu-by-longpress></image>
  <image src="/images/two.jpg" mode="widthFix"></image>

4、超链接

<view>
<navigator class="rizhi" url="/pages/logs/logs">跳转到日志</navigator>
</view>

但不能跳转到tabBar页面
.wxml

<button type="primary" bindtap="clickBtn" >跳转到logs</button>

.js

 clickBtn:function()
    {
      wx.switchTab({
        url:"/pages/logs/logs",
        
      })
    },

.wxml

<button type="primary" bindtap="clickBtn" >跳转到logs</button>

5、横向滑动，纵向滑动

 <scroll-view scroll-x>//横向滑动

    <view class="hd">
       <view class="hdbox">one</view>
       <view class="hdbox">two</view>
       <view class="hdbox">three</view>
       <view class="hdbox">four</view>
       <view class="hdbox">five</view>
    </view>

  </scroll-view>

<scroll-view scroll-y scroll-top="150">  //纵向滑动  从一半开始

<view class="hd2" >
   <view class="hdbox2">one</view>
   <view class="hdbox2">two</view>
   <view class="hdbox2">three</view>
   <view class="hdbox2">four</view>
   <view class="hdbox2">five</view>
</view>

</scroll-view>

6、滑动播放

.wxml

<swiper class="banner" indicator-dots autoplay interval="3000" circular next-margin="20">
  <swiper-item class="bannerItem">
    <image src="/images/two.jpg"></image>
  </swiper-item>
  <swiper-item class="bannerItem"> 
    <image src="/images/one.gif"></image>
  </swiper-item>
  <swiper-item class="bannerItem">
    <image src="/images/four.jpg"></image>
  </swiper-item>
   
</swiper>

.wxss

.banner{height:295rpx;border:1px solid red;}
.banner image{widtha:100%;height:295rpx;}
.bannerItem{ padding:0 5px;}

7、变量
.js

data: {
     title:"微信小程序开发",
     content:"欢迎来到懒羊羊的小屋",
     listArr:["懒羊羊","美羊羊","灰太狼"],
     obj:{name:"村长",age:"3",sex:"男"},
     day:"3"
  },

普通变量

<view>{{title}}</view>
<view style="color:#888">{{content}}</view>

数组

<view>
  {{listArr}}-{{listArr[0]}}-{{listArr[1]}}
</view>

对象

<view>
  {{obj.name}}-{{obj.age}}-{{obj.sex}}
</view>

8、if与else语句

</view>
<view>{{listArr}}</view>
<view wx:if="{{true}}">呼哈呼哈</view>
<view wx:else>周一</view>
<text decode>&nbsp;</text>

<view wx:if="{{day==1}}">周一</view>
<view wx:elif="{{day==2}}">周二</view>
<view wx:else>其他</view>

<block wx:if="{{false}}">
<navigatior url="/pages/index/index">跳转一</navigatior>
</block>
<block wx:else>
<navigatior url="/pages/logs/logs">跳转二</navigatior>
</block>

9、按钮

view class="out">
  <button class="btn1" type="primary" loading>登录</button>
  <button class="btn1" type="warn">退出登录</button>
  <button class="btn1" type="primary" size="mini">支付</button>
  <button class="btn1" type="primary" disabled>禁用</button>
  <button open-type="contact">联系客服</button>
</view>

10、进度条

<view style="padding:50px" >
  <progress percent="60" show-info font-size="15" active activeColor="pink">
  </progress>
</view>

11、标签icon

<view style="padding:50px;text-align:center">
  <icon type="success" size="100"></icon>
  <view>提交成功，感谢您的配合！</view>
</view>

12、在.json里进行页面配置

{
  "usingComponents": {},
  "navigationBarTitleText":"首页懒羊羊",

  "enablePullDownRefresh":true,
  "backgroundColorTop":"#f00"

}

在这里插入图片描述
13、提交输入的信息

<form bindsubmit="onSubmit">
  <input class="ipt" placeholder="请输入信息" placeholder-class="iptPlace" auto-focus></input>
  <button form-type="submit">提交</button>
  <switch checked></switch>
</form>

14、tabBar
在app.json中的tarbBar中建立一个list数组

{
  "pages":[
    "pages/index/index",
    "pages/demo1/demo1",
    "pages/logs/logs",
    "pages/about/about" 
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "LYL",
    "navigationBarTextStyle":"black",
    "backgroundColor":"#ff0",
    "enablePullDownRefresh":true

  },
  "tabBar":{
    "color":"#c30",
    "selectedColor":"#0ff",	
    "backgroundColor":"#ccc",
   "list":[
     {
       "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"images/home1.png",
        "selectedIconPath":"images/home2.png"
     },
     {
       "pagePath":"pages/logs/logs",
       "text":"日志"
     }
   ]


  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

15、编译某一页面
点击编译旁边->添加编译模式->选中要编译的页面
16、for循环

<view wx:for="{{10}}"  wx:key="*this">
   我是猪
</view>
<!--
  index索引值
  item 数组中的每一项
-->
.js
listArr:["one","two","three","four","five"]
.wxml
<view wx:for="{{10}}"  wx:key="*this">{{index}}、你是猪</view>
<view wx:for="{{[111,222,333,444]}}"  wx:key="*this">{{index}}、{{item}}</view>
<view wx:for="{{listArr}}"  wx:key="*this">{{index}}、{{item}}</view>

在这里插入图片描述

<view wx:for="{{listArr}}" wx:for-index="i" wx:for-item="content"  wx:key="*this">
  {{i}}、{{content}}
</view>
对象.wxml
<view wx:for="{{listObj}}"  wx:key="*this">
  <text>{{item.title}}</text> - <text>{{item.time}}</text> 
</view>
.js
listObj:[
       {title:"aaa",time:"2021/2/21"},
       {title:"bbb",time:"2021/2/22"}
    ]

记得加wx:key="*this"，如果还有警告信息，那么改为wx:key=“index”
17、API

onUnload: function () {
    //wx.showLoading({
    //  title: '数据加载中'
    //})
   // setTimeout(res=>{
     // wx.hideloading()
   // },1500)
  //},
  wx.showToast({
    title:"提交成功",
    icon:"loading"
  })
},

18、

在这里插入图片描述
.wxml

<view bindtap="navBack">返回上一页面</view>

.js

navBack:function(){
     wx.navigateBack()
   },

19、
在这里插入图片描述
.js

data: {
    dataList:[
      {title:"这是标题1",time:"2021-02-22",url:"/images/one.gif"},
      {title:"这是标题2",time:"2021-02-21",url:"/images/two.jpg"},
      {title:"这是标题3",time:"2021-02-20",url:"/images/four.jpg"}
    ]
  },

.wxml

view class="out">
<view class="row" wx:for="{{dataList}}">
  <view class="pic">
    <image src="{{item.url}}"></image>
  </view>
  <view class="text">
     <view class="title">{{item.title}}</view>
     <view class="time">{{item.time}}</view>
  </view>
</view>
</view>

.wxss

.out{padding:30rpx;box-sizing:border-box;}
.row{display:flex;height:150rpx;padding:10rpx 0;margin-bottom:20rpx;}
.pic{flex:2}
.pic image{width:100%;height:100%;}
.text{flex:8;border-bottom:1px solid #eee;padding-left:10rpx;
display:flex;flex-direction:column;justify-content:space-between;}
.text.tittle{font-size:38rpx;}
.text.time{color:#999;}