原生-小程序（一）

Nobita
237 阅读4分钟

小程序（一）

一、小程序介绍

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

1.优点
①开发成本低

②海量用户，粘性高

③迭代成本低

④体验好

二、准备开发环境

1.注册开发者账号
去“微信公众平台
1.邮箱信息
2.激活右键
3.填写个人信息、绑定微信
2.获取appId

开发=》开发管理=》开发设置=》appId

1656937367010.png

3.下载开发者工具

1656937401113.png

三、文件结构

1.页面结构

1.小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

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

1.wxml:结构，写标签代码
2.wxss：样式
3.JS：ES ，没有bom、dom
4.json：配置
2.最精简的结构

1656937538797.png

（1）app.js
内容全删
（2）app.json
pages字段必须有
pages数组中，至少又一个页面
（3）pages/index
1.json  保留json的{}
2.js  Page({})
3.wxml  全删
4.wxss   全删

四、配置文件

1.全局配置
（1）app.json(功能：页面路径，导航窗口，底部tabbar)

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等配置

（2)全局配置---属性
属性描述
entryPagePath小程序默认启动首页
pages页面路径列表
window全局的默认窗口表现
tabBar底部 tab 栏的表现（不超过5个）
（3）app.json基础配置（扩展需查阅文档）
{
  "entryPagePath":"pages/index/index",  
  "pages": ["pages/index/index", "pages/test/test", "pages/test2/index"],
  "window": {
    "navigationBarBackgroundColor": "#00ff00",   // 头部背景颜色
    "navigationBarTitleText": "我是测试页面",     // 显示文字
    "navigationBarTextStyle": "black",           // 显示颜色 
    "backgroundColor": "#ff0000",                // 窗口颜色
    "enablePullDownRefresh": true                // 下拉刷新
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/icons/home.png",
        "selectedIconPath": "assets/icons/home-o.png"
      },
      {
        "pagePath": "pages/test/test",
        "text": "测试页面",
        "iconPath": "assets/icons/my.png",
        "selectedIconPath": "assets/icons/my-o.png"
      }
    ],
    "color": "#000", 
    "selectedColor": "#f00",  // tabBar选中后显示的颜色
    "position": "top" // tabBar位置
  },
  "sitemapLocation": "sitemap.json"
}
2.页面配置
（1）页面.json

1.页面配置的文件是page.json。 开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

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

（2）注意
会覆盖全局配置中得导航栏
不能配置tabBar

五、模板语法

1.介绍

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

2.数据绑定
（1）定义数据
js文件中
Page({data:{数据变量名：值}})
不能将data写成函数
（2）使用数据（数据变量为布尔值时，可使用三元表达式）
wxml文件中
插值表达式: {{数据变量名}}
<view>{{数据变量名}}</view>
3.动态属性
（1）属性名="{{数据变量}}"
（2）注意
1.{{}}前后加字符串会自动拼接成字符串
2.标签属性如果值为true，可以省略="true"
4.条件渲染
（1）wx:if
类似：v-if
特点：为false时，会销毁节点
配合else使用
wx:elif\wx:else
（2）hidden
类似：v-show
特点：
为true时，隐藏，为false时显示
通过样式控制隐藏
5.列表渲染
（1）语法：wx:for="{{数据变量}}"
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
（2）key作用和语法

作用： 与vue中key的作用，一模一样，提高更新效率

语法：
1. 对象数组： wx:key="值唯一的键名"
2. 普通数据： wx:key="*this", *this代表数组中的每项元素
（3）注意事项
1. 默认item为内置的变量名，代表每项元素，💥可能为对象，也可能为其它值
2. 默认index为内置的变量名，代表数组的下标
3. 插值符号，前后都不能出现空格
（4）特点
可以循环字符串、数字、对象
avatar
文章
阅读
粉丝