美文网首页
小程序基本

小程序基本

作者: li二彩 | 来源:发表于2019-03-21 11:26 被阅读0次

1. 摸清楚了写代码前的基本配置

1>、下载开发工具,设置appid,创建项目

2.tabbar搭建

 1>、app.json 中
         "tabBar": {
            "color": "#477673",
            "selectedColor": "#ffd1dc",
            "backgroundColor": "#ffeaee",
            "borderStyle": "black",
            "list": [
                {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "Resouce/lemon.png"
              },
              {
              "pagePath": "pages/index/index",
              "text": "我的",
              "iconPath": "Resouce/牛油果.png"
              },
              {
            "pagePath": "pages/index/index",
            "text": "商城",
             "iconPath": "Resouce/猕猴桃.png"
              }
          ]
          }

3.获取位置信息

 app.json 中
"permission":{
      "scope.userLocation":{
       "desc":"位置信息"
        }
  },

4. 小程序自带弹窗

/// 第一种: 普通的标题、详情、确定、取消
wx.showModal({
  title: '啊哈哈',
  content: '谈了一个框',
  success: function(res){
    if(res.confirm){
      // that.setData({
      //   motto:"点击确定"
      // })
    /// 第二种: 成功提示的按钮带图标和文字
      // wx.showToast({
      //   title: '成功',
      //   icon:'success',
      //   duration:2000
      // })
  /// 第三种: 只提示文字, 持续几秒后消失
      // wx.showToast({
      //   title: '很多提示文字', /// 提示文字
      //   icon: 'none', //图片
      //   duration: 2000 // 持续时间
      // })
  /// 第四种: 从底部弹出的ActionSheet
      wx.showActionSheet({
        itemList: ["a","b", "c"],
        success: function(res) {
          if(!res.cancel){
            console.log(res.tapIndex) ///  点击了哪个按钮的下标
          }
        }
      })

    } else {
  /// 这种方式可以设置当前元素的文字
      that.setData({
        motto: "点击取消"
      })
    }
  }
})

相关文章

  • 小程序基本

    1. 摸清楚了写代码前的基本配置 2.tabbar搭建 3.获取位置信息 4. 小程序自带弹窗

  • 微信小程序--入门

    一:官方文档 微信小程序文档小程序开发工具 二:基本流程 注册页面【请点击】 三:基本案例讲解 1.小程序开发基本...

  • 小程序主体理解

    小程序的4种文件类型 小程序的基本结构 小程序良好的组件式结构

  • 小程序基本介绍

    一.小程序基本介绍 .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后...

  • 小程序基本构成

    微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目...

  • 小程序基本语法

    项目demo: https://github.com/Aluka-w/oldIsland-wx 逻辑层 (js) ...

  • 小程序基本布局

    小程序布局 微信小程序的页面开发和Web一样通过CSS对内容进行渲染,不同的是微信小程序利用Flex(弹性盒子)对...

  • 小程序 基本语法

    小程序 基本语法 列表渲染: wx:for项的变量名默认为 item wx:for-item 可以指定数...

  • 2018-10-22

    授权 基本语法:句句解析 个人中心 商城 小程序-系列教程 逻辑清晰_小程序

  • 微信小程序账号申请以及基本使用

    本章主要内容: 一、小程序简介 二、小程序账号申请流程 三、小程序相关信息配置 四、微信开发者工具 五、小程序基本...

网友评论

      本文标题:小程序基本

      本文链接:https://www.haomeiwen.com/subject/oosddqtx.html