美文网首页
小程序基本

小程序基本

作者: 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: "点击取消"
          })
        }
      }
    })
    

    相关文章

      网友评论

          本文标题:小程序基本

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