微信小程序1-小程序基础,开发工具安装使用

1.微信小程序优点

微信小程序官网
微信小程序官方文档

    1).自带推广

小程序自带的附近的小程序功能，帮助商家被五公里范围内的微信用户搜索到

    2).无需下载安装即可使用

小程序是一种无需下载安装即可使用的应用，能以最低成本触达用户

    3).小程序码

通过小程序码就能找到小程序，简单方便、识别度较高、推广打开率更高

    4).成本低

开发一款 App 成本太高，时间长，运营维护以及推广成本更高。小程序开发时间一般在一两周左右，由于有固定的框架和开发环境，相对成本较低

    5).体验流畅

小程序的流畅度很高，基本不会出现卡顿、延迟问题

    6).可以关联公众号

关联公众号后，小程序可以在公众号的文章中进行嵌入

    7).使用云开发能力

开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发

2.工具下载和使用

开发工具下载地址

    1).下载工具

选择安装的目录即可

弹出微信扫描框，用微信扫一扫即可登录

    2).新建项目

        (1).先注册账号

微信小程序登录注册入口

先注册，注册完毕后填入邮箱后等待激活，然后再填入相关信息

        (2).获取AppId

打开微信小程序官网，找到开发管理

微信小程序逛网

        (3).创建项目

输入AppId,如果没有服务后台选择云开发，如果有自己的服务器就不用选择云开发

        (4).开发工具界面介绍

    3).常用快捷键

ctrl+[:代码行向前缩进
ctrl+]:代码行向后缩进
ctrl+c:复制
ctrl+v:粘贴
Ctrl+S:保存
shift+alt+F:代码格式化
alt+up:向上移动一行
alt+down:向下移动一行
shift+alt+up:向上复制一行
shift+alt+down:向下复制一行
ctrl+shift+enter:向上插入一行
ctrl+enter:向下插入一行
shift+delete:删除当前行

3.开发相关

    1).页面配置

        (1).找到app.json,小程序的配置都在这里

        (2). 在pages里面新增一个页面，然后保存，自动会生成一个页面，谁在最前面谁就是首页

        (3).设置底部标题栏tabBar

先新建images和icon文件夹，并从iconfont下载一些图标放到此文件夹
iconfont图标库

  "tabBar":{
    "list":[
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath":"pages/images/icon/首页.png",
        "selectedIconPath":"pages/images/icon/首页1.png"
      },{
        "pagePath": "pages/data/data",
        "text": "工具",
        "iconPath":"pages/images/icon/工具.png",
        "selectedIconPath":"pages/images/icon/工具1.png"
      },{
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath":"pages/images/icon/我的.png",
        "selectedIconPath":"pages/images/icon/我的1.png"
      }
    ] 
  }

        (4).设置顶部标题栏

navigationBarBackgroundColor：导航栏背景颜色
navigationBarTextStyle： 导航栏标题颜色，仅支持 black / white
navigationBarTitleText：导航栏标题文字内容
enablePullDownRefresh：是否开启全局的下拉刷新
backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#87CEFA",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true
  }

    2).数据绑定

        (1).简单绑定

数据绑定使用双大括号
<view> {{ message }} </view>

        (2).组件属性绑定

<checkbox checked="{{false}}"> </checkbox>
<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

        (3).控制标签是否显示

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

        (4).逻辑判断

<view wx:if="{{length > 5}}"> </view>

        (5).字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

        (6).动态改变数据

//data.js文件中
 onLoad() {
    this.setData({
      message: "页面加载后改变数据"
   })

    3).条件判断wx:if

    4).循环wx:for

    5).事件处理

        (1).普通点击事件

<view bindtap="onclick">点击按钮</view>

 onclick(){
      console.log("点击事件")
  }

        (2).点击事件传参

 data: {
    user:{}
  },
  onclick(e:any) {
    var name= e.target.dataset.name
    var age= e.target.dataset.age
    console.log("点击事件:",name,age)
    this.setData({
      'user.name':name,
      'user.age':age
    })
  }