微信小程序

1.获取appid

点击直达

开发→开发管理→开发设置→appid

保存appid

wx5eead10d319cc63c

2.下载开发者工具

点击直达

开发→开发者工具→开发者工具→下载→根据系统下载稳定版

最后进行安装→登陆→点加号新建项目→填写appid→不适用云服务→新建

3.小程序配置
都删除了
在根目录app.json(pages是表示多少页面,此页面不允许注释,pages里面项目路径在外新建时候会自动添加)
输入以下文字

{
  "pages": [
    "pages/index/index"
  ]
}

新建pages文件夹,在pages新建index文件夹,保存然后鼠标右键新建page会新建四个文件

wxml(写html), wxss(写css)

text标签相当于span标签,view相当于div标签

创建一个app.js才可以预览

├── app.js
├── app.json
└── pages
    └── index
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss

全局和页面配置→官网文档

3.1全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性：

配置项

配置顶部:全局配置→window

app.json

添加内容

 "window":{
    "navigationBarBackgroundColor":"#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "yys"
  }

最终

{
  "pages": [
    "pages/index/index"
  ],
  "window":{
    "navigationBarBackgroundColor":"#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "yys"
  }

}

3.2.页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象，有以下属性：

配置项

页面配置中只能设置 app.json 中 window 对应的配置项，以决定本页面的窗口表现，所以无需写 window 这个属性。

• 注 1：关于navigationStyle
  • iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。
  • iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件无效
  • 开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉
  • Windows 客户端 3.0 及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle: custom 不再生效

配置tabBar导航:全局配置→tabBar(这个home也要学上面在pages里面新建)

app.json

添加部分代码

"tabBar": {
    "selectedColor": "#d4237a",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/3.png",
        "selectedIconPath": "static/tabbar/4.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/1.png",
        "selectedIconPath": "static/tabbar/2.png"
      }
    ]
  }

全部代码

{
  "pages": [
    "pages/index/index",
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#FFDAB9",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "yys"
  },
  "tabBar": {
    "selectedColor": "#d4237a",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/3.png",
        "selectedIconPath": "static/tabbar/4.png"
      },
      {
        "pagePath": "pages/home/home",
        "text": "我的",
        "iconPath": "static/tabbar/1.png",
        "selectedIconPath": "static/tabbar/2.png"
      }
    ]
  }
}

iconPath 设置图标

不支持ico格式

selectedColor:tab得颜色

tab最少2个,最多5个

3.3 组件(标签)

3.3.1 text

类似span

3.3.2 view

容器,类似于div标签

3.3.3 image

图片标签

3.4 样式

3.4.1 像素

• px
• rpx:会自动适应各种手机

4.flex布局

pages\index\index.wxml

<view class="menu">
  <image src="/static/y.png"></image>
  <text>精品</text>
  <image src="/static/y.png"></image>
  <text>精品</text>
  <image src="/static/y.png"></image>
  <text>精品</text>
</view>

pages\index\index.wxss

.menu{
  height: 1000rpx;
  display: flex;
  /* column在竖直方向排列,row在水平方向 */
  flex-direction: column;
  /* 元素主轴方向排列:flex-start/center/around/space-beteen */
  justify-content: space-around;
  /* 元素副轴方向排列*/
  align-items: center;
  /*圆角图片*/
  border-radius: 50rpx;
}

5.跳转

5.1 对标签绑定事件

pages\index\index.wxml

<view bindtap="clickMe" data-nid="123" data-name="yys">点我跳转</view>

js事件,放在page对象里面才可以:

pages\index\index.js

Page({

 

// 点击绑定事件

  clickMe:function(e){

    // 获取点击后data-nid的值

    var nid = e.currentTarget.dataset.nid;

    console.log(nid);

     }

})

5.2 跳转

注意跳转的路径要新建文件(非tabbar页面):

pages\index\index.js

 // 跳转

    wx.navigateTo({

      url: '/pages/redirect/redirect?id=' + nid,

    })

 跳转页面要接收参数,可以在onload方法种接收

pages\index\index.js

Page({

 /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  }

})

 1.3 通过标签跳转

pages\index\index.wxml

<navigator url="/pages/redirect/redirect?id=666" >navigator跳转</navigator>

6.数据绑定

新建一个bind文件夹

指定的文件编译:普通编译:右边选择添加编译模式→选择bind路径

点 确定

pages\bind\bind.wxml

<text>数据绑定</text>
<view>数据:{{message}}</view>
<button bindtap="changeDate">点击修改数据</button>

pages\bind\bind.js

data: {
    message:"yys"
  },

  changeDate:function(){
    // 获取数据
    console.log(this.data.message)
    // 修改数据
    this.setData({message: "yys good"})
  },

js里面message会传到前端页面,serDate可以修改前后端数据

7.获取用户信息

点击直达

指定的文件编译:普通编译:右边选择添加编译模式→选择bind路径

1.方法一

pages\bind\bind.wxml

<view>当前用户名为:{{name}}</view>
<view>当前头像为<image src="{{path}}" style="height:200rpx;width:200rpx"></image></view>
<view bindtap="getUsername">获取当前用户名</view>

pages\bind\bind.js

// 数据绑定
data: {
    "name":"",
    "path":"/static/default.png"
  }

getUsername:function(){
    var that = this;
    //调取用户接口,获取当前用户的信息
    wx.getUserInfo({
      //调取成功后触发
      success: function(res){
          console.log("success", res.userInfo.nickName);
          that.setData({
            name: res.userInfo.nickName,
            path: res.userInfo.avatarUrl
          });
      },
      //调取失败后触发
      fail:function(res){
        console.log("fail", res.userInfo)
      }
    })
  }

2.方法二(官方推荐botton方式):

pages\login\login.wxml

<view>当前用户名为:{{name}}</view>
<view>当前头像为<image src="{{path}}" style="height:200rpx;width:200rpx"></image></view>
<button  open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">获取信息button</button>

 pages\login\login.js

 data: {
    "name":"",
    "path":"/static/default.png"
  }

bindGetUserInfo:function(){
    // 打开配置,手动授权
    wx.openSetting({ });
    var that = this;
    //调取用户接口,获取当前用户的信息
    wx.getUserInfo({
      //调取成功后触发
      success: function(res){
          console.log("success", res.userInfo.nickName);
          that.setData({
            name: res.userInfo.nickName,
            path: res.userInfo.avatarUrl
          });
     
      },
      //调取失败后触发
      fail:function(res){
        console.log("fail", res.userInfo)
      }
    })
  }

8.获取位置信息

pages\login\login.wxml

<view bindtap="getlocalpath">{{localPath}}</view>

 pages\login\login.js

  data: {
    "localPath": "请选择位置"
  }

  getlocalpath:function(){
    var that = this;
    console.log("获取用户地址");
    wx.chooseLocation({
      success: function(res){
        console.log(res);
        that.setData({localPath:res.address})
      },
      fail:function(){
        console.log(res);
      }
    })
  },

9. for循环

新建一个goods文件夹和page

pages\goods\goods.js

<view>商品列表</view>
<view>
  <view wx:for="{{datalist}}">{{index}}-{{item}}</view>
</view>

pages\goods\goods.wxml 

  data: {
    datalist:['苹果','香蕉', '梨']
  },