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 对象，有以下属性：

配置项

属性 类型 必填 描述 最低版本
entryPagePath string 否 小程序默认启动首页  
pages string[] 是 页面路径列表  
window Object 否 全局的默认窗口表现  
tabBar Object 否 底部 tab 栏的表现  
networkTimeout Object 否 网络超时时间  
debug boolean 否 是否开启 debug 模式，默认关闭  
functionalPages boolean 否 是否启用插件功能页，默认关闭 2.1.0
subpackages Object[] 否 分包结构配置 1.7.3
workers string 否 Worker 代码放置的目录 1.9.90
requiredBackgroundModes string[] 否 需要在后台使用的能力，如「音乐播放」  
plugins Object 否 使用到的插件 1.9.6
preloadRule Object 否 分包预下载规则 2.3.0
resizable boolean 否 PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭 2.3.0
usingComponents Object 否 全局自定义组件配置 开发者工具 1.02.1810190
permission Object 否 小程序接口权限相关设置 微信客户端 7.0.0
sitemapLocation string 是 指明 sitemap.json 的位置  
style string 否 指定使用升级后的weui样式 2.8.0
useExtendedLib Object 否 指定需要引用的扩展库 2.2.1
entranceDeclare Object 否 微信消息用小程序打开 微信客户端7.0.9
darkmode boolean 否 小程序支持 DarkMode 2.11.0
themeLocation string 否 指明 theme.json 的位置，darkmode为true为必填 开发者工具 1.03.2004271
lazyCodeLoading string 否 配置自定义组件代码按需注入 2.11.1
singlePage Object 否 单页模式相关配置 2.12.0

配置顶部:全局配置→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 对象，有以下属性：

配置项

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000  
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white  
navigationBarTitleText string   导航栏标题文字内容  
navigationStyle string default 导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。参见注 1。		 iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
backgroundColor HexColor #ffffff 窗口的背景色  
backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light  
backgroundColorTop string #ffffff 顶部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
backgroundColorBottom string #ffffff 底部窗口的背景色，仅 iOS 支持 微信客户端 6.5.16
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
详见 Page.onPullDownRefresh		  
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为px。
详见 Page.onReachBottom		  
pageOrientation string portrait 屏幕旋转设置，支持 auto / portrait / landscape
详见 响应显示区域变化		 2.4.0 (auto) / 2.5.0 (landscape)
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效，无法在 app.json 中设置		  
usingComponents Object 否 页面自定义组件配置 1.6.3
initialRenderingCache string   页面初始渲染缓存配置 2.11.1
style string default 启用新版的组件样式 2.10.2
singlePage Object 否 单页模式相关配置 2.12.0

页面配置中只能设置 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

启动页面

 pages/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:['苹果','香蕉', '梨']
  },