小程序基本

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

你可能感兴趣的:(小程序基本)