ltb8r.com

「开发阶段」微信小程序基础教程

要开发微信小程序之前,需要做一些准备工作,例如,下载微信开发者工具、创建本地小程序项目,这样我们就进行简单的微信小程序开发。

改变顶部导航样式

如果要改变页面的顶部导航样式,则需要在当前页面的json文件中对其进行修改,例如,如果要修改index页面的顶部导航,请在index.json中进行设置

{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "black",
  "navigationBarTextStyle": "#fff"
}

如果要修改所有页面的顶部导航,则需要在app.json中进行修改

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

如果在index.json中也设置了顶部导航,则优先级别是index.json,app.json里面设置顶部导航是默认样式index页面设置顶部导航,结果如下

微信小程序基础开发阶段教程

页面跳转问题

首先微信小程序中有个navigator标签,你可以把他理解成web中的a标签在wxml文件中

<!-- 跳转到新页面 -->
<navigator url="../test/test">navigator跳转</navigator>
<!-- 跳转到当前页面 -->
<navigator url="../test/test" open-type="redirect">redirect跳转</navigator>

当然除了可以在wxml中直接写跳转,也可以用另外一种方法写跳转在wxml中

<text bindtap="navigatorFunc">navigator跳转</text>

<text bindtap="enterTest">redirect跳转</text>

在js文件中

enterTest:function(){
    wx.redirectTo({
      url: '../test/test',
    })
  },

  navigatorFunc:function(){
     wx.navigateTo({
       url: '../test/test',
     })
  },

创建轮播图

在wxml中

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <navigator url="{{item.link}}" hover-class="navigator-hover">
      <image src="{{item.url}}" class="slide-image"/>
      </navigator>
    </swiper-item>
  </block>
</swiper>

swiper不能放在任何元素内部,否则轮播会出错在wxss中

.slide-image{
  width: 100%;
}

设置图片宽度铺满整个屏幕在js中

data: {
      imgUrls: [
        {
          link: '/pages/index/index',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701524.jpg'
        }, {
          link: '/pages/logs/logs',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701516.jpg'
        }, {
          link: '/pages/test/test',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701517.jpg'
        }
      ],
      // 是否需要底部轮播小点 
      indicatorDots: true,
      // 是否自动播放
      autoplay: true,
      // 自动播放时间间隔
      interval: 5000,
      // 滑动动画时间
      duration: 1000,  

  },

其中link为跳转链接,URL为图片的地址,但是图片地址不能是本地地址必须是线上图片地址或者base64为图片运行效果如下。

微信小程序基础开发阶段教程

底部导航栏切换

在app.json中添加

"tabBar": {
    "color": "#000",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/1-1.png",
        "iconPath": "images/1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/test/test",
        "text": "测试"
      }
    ]
  }

selectedIconPath为选中时的底部图标,iconPath是未选中时的底部图标,pagePath是点击时切换页面路径,text是顶部文字内容,color是底部文字颜色,selectedColor文字选中颜色。 注意:底部导航切换按钮不能超过五个运行

微信小程序基础开发阶段教程

这里应该注意的是,当你已经使页面路径切换到底部导航时,其他页面必须输入此页面路径切换代码不能使用普通切换,正确的代码如下:在js中

wx.switchTab({
    url: 'pages/test/test',
  })

或者在wxml中

<navigator url="/pages/index/index" open-type="switchTab">跳转按钮</navigator>

表单提交和清空

在wxml中

<!-- 表单 -->
<form bindsubmit="formSubmit" bindreset="formReset">
   <view class="group">
    <view class="title">用户名:</view>
    <view class="cont">
    <input type="text" name="username" placeholder="请输入用户名"/>
    </view>
    <view class="clear"></view>
    </view>
    <view class="group">
    <view class="title">性别:</view>
    <view class="cont">
    <radio-group name="gender">
    <label><radio value="1"/>男</label>
    <label><radio value="0"/>女</label>
    </radio-group>
    </view>
    <view class="clear"></view>
   </view>
   <view class="group">
    <view class="title">food:</view>
    <view class="cont">
    <checkbox-group name="hobby">
   <label><checkbox value="0"/>蛋糕</label>
   <label><checkbox value="1"/>牛排</label>
   <label><checkbox value="1"/>排骨头</label>
    </checkbox-group> 
    </view>
    <view class="clear"></view>
   </view>   
   <view class="group">
    <view class="title">同意:</view>
    <view class="cont">
   <switch name="isagree"/>
    </view>
    <view class="clear"></view>
   </view>  
   <view class="group">
    <button form-type="submit">提交表单</button>
    <button form-type="reset">清空表单</button>
   </view>
</form>

在wxss中

.clear{
  clear: both;
}
.title{
  float: left;
  width: 100px;
  text-align: right;
}
.cont{
  float: left;
}
input{
  border:1px solid gainsboro;
}
.group{
  margin-top:20px;
}

在js中

// 提交表单函数
formSubmit:function(e){
  console.log(e);
  console.log("表单已经提交!");
  console.log("用户名:"+e.detail.value.username);
  console.log("性别:" + (e.detail.value.gender==1?"男":"女"));
},

// 清空表单函数
formReset:function(e){
  console.log("表单已经清空!");
},

效果如下

注意:formSubmit为表单提交后执行的函数,e.detail.value中是表单提交上来的数据,这里要注意,存放数据的标签一定要有name属性值才能获取数据

弹窗 模态框

在wxml中

<view class="modalBox">
  <button bindtap="modalFunc">modal模态框</button>
  <button bindtap="createModal">动态创建模态框</button>
</view>     
<!-- 提示框 -->
<modal title="提示" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirmFunc" bindcancel="cancelFunc">  
是否确认提交?  
</modal>  

在js中

data: {
    //false显示,true为隐藏
    modalHidden:true
  },

  // 模态框出现
  modalFunc:function(){
    // 显示提示框
    this.setData({
      modalHidden: false
    });
  },

  // 动态创建模态框
  createModal:function(){
    wx.showModal({
      title: '动态创建模态框',
      content: '本框测试用的哈',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

  // 确认函数
  confirmFunc:function(){
    console.log("点击了确认!");
    // 关闭提示框
    this.setData({
      modalHidden: true
    });
  },

  // 取消函数
  cancelFunc:function(){
    console.log("点击了取消!");
      // 关闭提示框
    this.setData({
      modalHidden: true
    });
  },

运行结果如下

微信小程序基础开发阶段教程
微信小程序基础开发阶段教程

微信小程序基础开发阶段教程

提示框在wxml中

<view class="modalBox">
    <button bindtap="toastFunc">toast提示框</button>
    <button bindtap="createToast">动态创建toast提示框</button>
</view>
<!-- 提示框 -->
<toast hidden="{{toastHidden}}">提交成功</toast>  

在js中

data: {
     //false显示,true为隐藏
    toastHidden:true
  },

  // 提示框出现
  toastFunc:function(){
    // 显示提示框
    this.setData({
      toastHidden: false
    });

    // 两秒后提示框消失
    var that = this;
    setTimeout(function(){
      that.setData({
        toastHidden: true
      });
    },2000);

  },

  // 动态创建提示框
  createToast:function(){
     wx.showToast({
       title: '设置成功',
     })
  },

截图效果如下

微信小程序基础开发阶段教程

以上这些都是微信小程序里面比较基础的内容

免责声明:本站所有PPT模板资源均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,如果损害了您的权益,请联系网站客服处理
本文地址:https://www.ltb8r.com/webseo/88.html
打赏 微信扫一扫 微信扫码打赏

相关推荐

  • 百度快照 什么是百度快照? 它如何帮助SEO?

    1.什么是百度快照? 百度快照是一个基本概念,之前也曾提到过。 例如,如果您在百度上搜索 小熊吧织梦仿站 ,则搜索到的网站后面会出现百度快照。 单击第一个百度快照,顶部显示…

    08-08 09:37 177
  • 微信小程序 小程序实现简单语音聊天

    框架相关 Demo采用Mpvue框架,后端的WebSocket采用Node.js,文件服务器直接使用的微信 小程序 的云开发的存储。 储备知识 微信小程序录音控制器:recorderManager。 微信小程序音频控制器:…

    07-28 09:09 183
  • 自适应 电脑pc端的网页自适应显示在移动端方法

    当我们将一个pc端的网页放到移动端的时候,移动端浏览器会将pc端的网页按照一定的比例完整的显示出来,这是因为移动端的浏览器默认的会将网页渲染在一个比例比较大的viewport中排…

    07-02 10:26 107
  • 微信小程序 微信小程序开发组件初步使用和配置

    微信小程序基础开发详解知识,关于一些小程序的组件初步使用和配置项的讲解。…

    04-13 10:35 110
  • 微信小程序 「用户登录」微信小程序登录验证实现

    对于部分页面添加登录验证,当用户未登录时,进入页面,该页面自动转到登录页面。 成功登录验证后,回调到登录发起页面。…

    04-12 13:56 167