手把手带你小程序入门

Posted ZZZ --- jh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手把手带你小程序入门相关的知识,希望对你有一定的参考价值。

小程序

官网

​ https://developers.weixin.qq.com/miniprogram/dev/framework/


概念

  • 微信小程序(Mini Program), 是一种不需要下载安装即可使用的应用,实现了应用’触手可及’的梦想,用户扫一扫即可打开应用.
  • 小程序要求压缩包的体积不能大于2M

作用

  • 微信有海量用户,而且粘性很高,在微信里开发产品更容易触达用户
  • 推广APP或者公众号的成本太高
  • 开发适配成本低
  • 容易小规模试错,然后快速迭代
  • 跨平台

特点

  1. 没有DOM

  2. 组件化开发: 具备特定功能效果的代码集合

  3. 体积小,单个压缩包体积不能大于2M,否则无法上线

  4. 小程序的四个重要文件

    • *.js
    • *.wxml —> view结构 —> html
    • *.wcss —> view样式 —> css
    • *.json —> view数据 —> json文件
  5. 小程序适配方案: rpx

    • 规定任何屏幕下宽度为750rpx
    • 小程序会根据屏幕的宽度不同自动计算rpx值得大小.

环境准备

  • 小程序的注册:

    https://mp.weixin.qq.com/wxopen/waregister?action=step1

  • 获取APPID(我的APPID: wx12a6dd3d0581a628 )

    https://mp.weixin.qq.com/wxamp/home/guide?token=987631999&lang=zh_CN

    点击左侧的开发管理 —> 点击出现的开发设置,有个APPID

在这里插入图片描述

  • 微信开发者工具

    https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    完整的环境: 开发,预览,调试,发布


第一个微信小程序

  1. 打开微信开发者工具

  2. 新建小程序项目

在这里插入图片描述
在这里插入图片描述


微信开发者工具介绍

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

在这里插入图片描述


小程序结构目录

小程序框架

目标: 尽可能简单,高效的方式让开发者可以再微信中开发具有原生APP体验的服务.

分类: 逻辑层(app service) 和 视图层(view)

小程序提供了自己的视图层描述语言 WXMLWXSS,以及基于 javascript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑。

小程序的四个重要文件:

  • *.js
  • *.wxml —> view结构 —> html
  • *.wcss —> view样式 —> css
  • *.json —> view数据 —> json文件(配置文件)

文件介绍:

pages文件夹 :页面文件夹

     ​  index文件夹: 首页

​     ​       ​  index.js 首页的逻辑文件

     ​       ​  index.json 首页的配置文件

     ​       ​  index.wxml 首页的配置文件

     ​       ​  index.wxss 首页的样式文件

     ​  logs文件夹: 日志页面

utils文件夹: 第三方的工具js(可以删除)

app.js 项目的全局 入口文件

app.json 全局配置文件

app.wxss 全局样式文件

project.config.json 项目的配置文件,如APPID

sitemap.json 微信索引配置文件

在这里插入图片描述


小程序配置文件

  1. 全局配置 app.json

    https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

    {
      //pages 用于描述当前小程序所有的页面路径,
      //这是为了让微信客户端知道当前你的小程序页面定义在哪个目录里
      "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/demo01/demo01"
      ],
      // window 定义小程序所有页面的顶部背景颜色,文字颜色定义等.
      "window":{
        // 下拉loading的样式,仅支持dark/light
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle":"black",
        // 是否开启全局的下拉刷新,默认为false
        "enablePullDownRefresh":true,
        // 窗口的背景颜色
        "backgroundColor": "#000",
      },
      // 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),
      // 可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
      "tabBar": {
        "list": [
        {
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "icon/_home.png",
          "selectedIconPath": "icon/home.png"
        },
        {
          "pagePath": "pages/img/img",
          "text": "图片",
          "iconPath": "icon/_img.png",
          "selectedIconPath": "icon/img.png"
        },
        {
          "pagePath": "pages/mine/mine",
          "text": "个人",
          "iconPath": "icon/_my.png",
          "selectedIconPath": "icon/my.png"
        },
        {
          "pagePath": "pages/search/search",
          "text": "搜索",
          "iconPath": "icon/_search.png",
          "selectedIconPath": "icon/search.png"
        }
        ],
        // tab 上的文字默认颜色,仅支持十六进制颜色
        "color":"#000",
        // tab 上的文字选中时的颜色,仅支持十六进制颜色
        "selectedColor": "#0094ff",
        // tab 的背景色,仅支持十六进制颜色
        "backgroundColor": "#ccc",
        // position	string	否	bottom	tabBar 的位置,仅支持 bottom / top
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    在这里插入图片描述

    效果图:在这里插入图片描述

    注意:

    “navigationBarBackgroundColor” 后面的属性值的颜色只能写带#的,不能直接写单词;

    “navigationBarTextStyle” 字段 导航栏的颜色需为黑色black或者白色white

  2. 页面配置 page.json

    page.json 用来表示页面目录下的page.json这类和小程序相关的配置.

    页面的配置只能设置app.json中部分window配置项的内容,页面中配置项会覆盖app.jsonwindow中相同的配置项

    在这里插入图片描述

    eg:

    {
      "usingComponents": {},
      "navigationBarBackgroundColor": "#0094aa",
      "navigationBarTitleText": "Weixin - demo01"
    }
    
  3. sitemap配置(了解)

    小程序目录下的siemap.json文件用于配置小程序及其页面是否允许被微信索引


代码编辑器技巧:

  • 1 text标签 相当于以前的web中的 span标签 行内元素 不会换行

  • 2 view标签 相当于以前的web中的 div标签 块级元素 会换行

  • 3 checkbox 以前的复选框标签

  • 批注: 页面demo.js中如果误删了内容的话,在微信开发者工具里面直接写Page,然后根据出来的提示直接回车就恢复了; 在vscode中先下载一个插件 小程序开发助手 ,然后直接写page,根据出来的提示wx-page直接回车(如果没有这个提示的话,去查看安装这个小程序助手插件的版本)


模板语法

  1. 数据绑定

    <!--pages/demo03/demo03.wxml-->
    
    <!-- 1 字符串 -->
    <view> {{msg}} </view>
    <!-- 2 数字类型 -->
    <view> {{num}} </view>
    <!-- 3 布尔类型 -->
    <view> 千纸鹤:{{isGirl}} </view>
    <!-- 4 obj -->
    <view> {{person.age}} </view>
    <view> {{person.height}} </view>
    <view> {{person.weight}} </view>
    <view> {{person.name}} </view>
    
    <!-- 5 在标签的属性中使用 -->
    <view data-num='{{num}}'>自定义属性</view>
    
    <!-- 
      6 使用布尔类型充当属性 checked 
      	不要直接写 checked=false,其计算结果是⼀个字符串
        字符串 和 花括号之间一定不要存在空格 否则会导致识别失败
        以下的写法就是错误的写法 <checkbox checked='           {{isChecked}}'></checkbox>
    -->
    <view>
      <checkbox checked='{{isChecked}}'></checkbox>
    </view>
    
    /* demo03/demo03.js */
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        msg:'hello mina',
        num:1000,
        isGirl:true,
        person:{
          age:21,
          height:160,
          weight:100,
          name:'富婆'
        },
        isChecked:false,
      }
    })
    

    注意: 字符串 和 花括号之间一定不要存在空格 否则会导致识别失败,会被解析成字符串的

  2. 运算

    <!-- 
      7 运算 ==> 表达式
        1 可以在花括号中 加入 表达式 --- '语句'
        2 表达式
          指的是一些简单 运算 数字运算 字符串 拼接 逻辑运算...
          	数字的加减...
          	字符串拼接
          	三元表达式
        3 语句
          复杂的代码段: 
            if else
            switch
            do while ...
            for...
     -->
    <view> {{1+1}} </view>
    <view> {{'1'+'1'}} </view>
    <view> {{10%2===0 ? '偶数' : '奇数'}} </view>
    
  3. 列表渲染

    • 列表循环

      /* demo03/demo03.js */
      Page({
        /**
         * 页面的初始数据
         */
        data: {
          person:{
            age:21,
            height:160,
            weight:100,
            name:'富婆'
          },
          list:[
            {
              id:0,
              name:'千纸鹤'
            },
            {
              id:1,
              name:'白月光'
            },
            {
              id:2,
              name:'十二'
            },
          ]
        }
      })
      
      <!-- 
        8 列表循环
          1 wx:for="{{数组或者对象}}"  wx:for-item='循环项的名称'  wx:for-index='循环项的索引'
          2 wx:key='唯一的值' 用来提高列表渲染的性能
            2.1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称肯定是循环数组中的对象的唯一属性
            2.2 wx:key='*this' 表示你的数组是一个普通的数组  *this表示时循环项
              [1,2,3,4,5]    ['11','qq']
          3 当出现数组的嵌套循环时 尤其要注意 一下绑定的名称不要重名
            wx:for-item='item'  wx:for-index='index'
          4 默认情况下 我们不写 wx:for-item='item'  wx:for-index='index'
            小程序也会把 循环项的名称和索引名称item和index
            只有一层循环的话 (wx:for-item='item'  wx:for-index='index') 可以省略
       -->
      <view>
        <view 
        wx:for='{{list}}'
        wx:for-item='item' 
        wx:for-index='index'
        wx:key='*this'
        >
          索引: {{index}} --- 
          值: {{item.name}}
        </view>
      </view>
      

      效果: 在这里插入图片描述

    • 对象循环

      <!-- 
        9 对象循环
          1 wx:for="{{对象}}"  wx:for-item='对象的值'  wx:for-index='对象的属性'
          2 循环对象时 把 item和index 的名称都修改一下
            wx:for-item='value'  wx:for-index='key'
       -->
      <view>
        <view>--------------------------------</view>
        <view>对象循环</view>
        <view 
        wx:for='{{person}}' 
        wx:for-item='value'  
        wx:for-index='key'
        wx:key='age'
        >
          属性: {{key}} --- 
          值: {{value}}
        </view>
      </view>
      

      效果: 在这里插入图片描述

    • block标签

      <!-- 
        10 block
          占位符的标签
          写代码时 可以看到这标签的存在
          页面渲染 小程序会把它移除掉
       -->
       <view>
        <block 
        wx:for='{{list}}'
        wx:for-item='item' 
        wx:for-index='index'
        wx:key='*this'
        class="my_list"
        >
          索引: {{index}} --- 
          值: {{item.name}}
        </block>
      </view>
      

      效果: 在这里插入图片描述

  4. 条件渲染

    <!-- 
      11 条件渲染
        1 wx:if="{{true/false}}"
          if,   else,  if else,
            wx:if
            wx:elif
            wx:else
        2 hidden
          在标签上直接加入属性 hidden
          hidden="{{true}}"
        3 什么场景下用哪个
          1 当标签不是频繁的切换显示 优先使用 wx:if
            直接把标签从页面结构给移除掉
          2 当标签频繁的切换显示时 优先使用 hidden
            通过添加样式的方式来切换显示
            hidden属性不要和样式display一起使用
     -->
     <view>
      <view>--------------------------------</view>
      <view>条件渲染</view>
      <view wx:if='{{true}}'>显示</view>
      <view wx:if='{{false}}'>隐藏</view>
    
      <view wx:if="{{false}}">1</view>
      <view wx:elif="{{false}}">2</view>
      <view wx:else>3</view>
    
      <view>=========</view>
      <view hidden>hidden1</view>
      <view hidden="{{true}}">hidden2</view>
    
      <view>~~~~~~~~~</view>
      <view wx:if="{{false}}">wx:if</view>
      <view hidden style="display:flex;">hidden</view>
     </view>
    

注意:

  1. 全局配置app.json中的"tabBar"字段中的list里面最少得有两个数组
  2. "navigationBarBackgroundColor" 后面的属性值的颜色只能写带#的,不能直接写单词
  3. "navigationBarTextStyle" 字段 导航栏的颜色需为黑色black或者白色white
  4. text标签 相当于以前的web中的 span标签 行内元素 不会换行
  5. view标签 相当于以前的web中的 div标签 块级元素 会换行
  6. checkbox 以前的复选框标签
  7. 字符串 和 花括号之间一定不要存在空格 否则会导致识别失败,会被解析成字符串的
  8. 使用布尔类型充当属性 checked, 不要直接写 checked=false,其计算结果是⼀个字符
  9. 当标签不是频繁的切换显示 优先使用 wx:if, 直接把标签从页面结构给移除掉
    当标签频繁的切换显示时 优先使用 hidden, 通过添加样式的方式来切换显示, hidden属性不要和样式display一起使用

总结:

  • 小程序的适配方案 : rpx

  • 四个重要文件:

    (1) *.js

    (2) *.wxml —> view结构 —> html

    (3) *.wcss —> view样式 —> css

    (4) *.json —> view数据 —> json文件(配置文件)

  • 配置文件

    (1) 全局配置app.json

    (2) 页面配置page.json

    (3) sitemap配置

  • 模板语法

    (1) 数据绑定:

    字符串, 数字类型, 布尔类型, 对象, 标签属性中使用, 使用布尔类型充当属性

    (2) 运算 ==> 表达式(数字加减拼接,三元表达式)

    (3) 列表渲染

    • wx:for="{{数组}}" wx:for-item='循环项的名称' wx:for-index='循环项的索引'
    • wx:key='唯一的值' 用来提高列表渲染的性能
    • wx:for="{{对象}}" wx:for-item='对象的值' wx:for-index='对象的属性'
    • block标签 – 占位符,页面渲染时小程序会把它移除掉

    (4) 条件渲染

    • wx:if="{{true/false}}"
    • wx:if     wx:elif     wx:else
    • 在标签上直接加入属性 hidden —> hidden="{{true}}"

以上是关于手把手带你小程序入门的主要内容,如果未能解决你的问题,请参考以下文章

手把手教会你小程序登录鉴权

下载NLP绝佳入门经典图书《NLTK-Python自然语言处理》中英文版, 教程+代码手把手带你实践NLP算法

手把手带你入门微信小程序 | 寻找C站宝藏

手把手带你入门机器学习1——线性回归

手把手带你入门神秘的RxJava

超详细的Java开发环境搭建指南(手把手带你开发第一个Java程序)