小程序

npm

一、npm初始化

如果你的小程序项目没有安装过npm包的话，你需要先初始化npm

npm init

二、安装npm包

npm i vant-weapp -S --production

2：点击微信开发者工具菜单栏的工具，选择构建npm

当显示如下表示npm构建成功，构建完成就可以使用npm包了

文章目录

一、小程序结构目录
    1. 全局配置app.json
    2. 页面配置page.json
    3. sitemap配置sitemap.json
二、小程序模板语法
    1. 数据绑定
    2. 运算
    3. 列表渲染和对象渲染
        1. 列表渲染
        2. 对象渲染
    4. block
    5. 条件渲染
        1. wx:if
        2. hidden
    6. 事件的绑定
        1. 如何获取页面的值
        2. 把输入框的值赋值到data中
    7. 事件的绑定（按钮）
        1. num添加传递的数据

一、小程序结构目录

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。

pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
tabBar字段 - 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2. 页面配置page.json

page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

3. sitemap配置sitemap.json

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

二、小程序模板语法

text相当于span标签，行内元素
view相当于div标签，块元素
checkbox 复选框

小程序 - 模板语法
学习中的小菜鸟.
于 2022-02-25 19:50:26 发布 276
收藏
分类专栏： 小程序 文章标签： 小程序 微信小程序 前端
版权
小程序 专栏收录该内容
2 篇文章 0 订阅
订阅专栏

文章目录

一、小程序结构目录
    1. 全局配置app.json
    2. 页面配置page.json
    3. sitemap配置sitemap.json
二、小程序模板语法
    1. 数据绑定
    2. 运算
    3. 列表渲染和对象渲染
        1. 列表渲染
        2. 对象渲染
    4. block
    5. 条件渲染
        1. wx:if
        2. hidden
    6. 事件的绑定
        1. 如何获取页面的值
        2. 把输入框的值赋值到data中
    7. 事件的绑定（按钮）
        1. num添加传递的数据

一、小程序结构目录

在这里插入图片描述

1. 全局配置app.json

   app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。
   在这里插入图片描述

   pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
   window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
   tabBar字段 - 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2. 页面配置page.json

   page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。
   在这里插入图片描述

   开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
   在这里插入图片描述

3. sitemap配置sitemap.json

   小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

二、小程序模板语法

text相当于span标签，行内元素
view相当于div标签，块元素
checkbox 复选框

1. 数据绑定

普通写法

2. 运算

<!--
  运算：
  1. 数字的加减
  2. 字符串拼接
  3. 三元表达式
-->
<view>{
   {
   1+2+3}}</view>
<view>{
   {
   '1' + '1'}}</view>
<view>{
   {
   isChecked ? true : false}}</view>

3. 列表渲染和对象渲染

小程序 - 模板语法
学习中的小菜鸟.
于 2022-02-25 19:50:26 发布 276
收藏
分类专栏： 小程序 文章标签： 小程序 微信小程序 前端
版权
小程序 专栏收录该内容
2 篇文章 0 订阅
订阅专栏

文章目录

一、小程序结构目录
    1. 全局配置app.json
    2. 页面配置page.json
    3. sitemap配置sitemap.json
二、小程序模板语法
    1. 数据绑定
    2. 运算
    3. 列表渲染和对象渲染
        1. 列表渲染
        2. 对象渲染
    4. block
    5. 条件渲染
        1. wx:if
        2. hidden
    6. 事件的绑定
        1. 如何获取页面的值
        2. 把输入框的值赋值到data中
    7. 事件的绑定（按钮）
        1. num添加传递的数据

一、小程序结构目录

在这里插入图片描述

1. 全局配置app.json

   app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。
   在这里插入图片描述

   pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
   window字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
   tabBar字段 - 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2. 页面配置page.json

   page.json其实⽤来表⽰⻚⾯⽬录下的 page.json这类和⼩程序⻚⾯相关的配置。
   在这里插入图片描述

   开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。
   在这里插入图片描述

3. sitemap配置sitemap.json

   小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引

二、小程序模板语法

text相当于span标签，行内元素
view相当于div标签，块元素
checkbox 复选框

1. 数据绑定

普通写法

2. 运算

  运算：
  1. 数字的加减
  2. 字符串拼接
  3. 三元表达式
-->
<view>{
  {1+2+3}}</view>
<view>{
  {'1' + '1'}}</view>
<view>{
  {isChecked ? true : false}}</view>

3. 列表渲染和对象渲染

1. 列表渲染

基本语法 ： wx:for="{
  {数组或对象}}"
wx:for-item ： 指定数组当前元素的变量名, 不写默认为item
wx:for-index ：指定数组当前下标的变量名，不写默认为index
wx:key ：⽤来提⾼数组渲染的性能

<!--
  列表：books: ['js高级程序设计', 'css权威指南', 'html与css入门']
  列表循环
  1. wx:for="{
   {数组或对象}}"
  2. wx:for-item="项的名称"
  3. wx:for-index="下标的变量名"
  4. wx:key⽤来提⾼数组渲染的性能，必须是循环数组中唯一的值
-->
<view wx:for="{
   {books}}" wx:for-item="book" wx:for-index="index" wx:key="index">
  书名 ：{
   {
   book}}
  索引 ：{
   {
   index}}
</view>
————————————————

2. 对象渲染

对象渲染时，
wx:for-item=“值”
wx:for-index=“键”

<!--
  person: {
   
    name: "张飞",
    age: 128,
    hobby: "俺也一样"
  }
  对象渲染
  1. wx:for="{
   {对象}}"
  2. wx:for-item="值"
  3. wx:for-index="键"
-->
<view wx:for="{
   {person}}" wx:for-item="value" wx:for-index="key">
  {
   {
   key}} -- {
   {
   value}}
</view>

4. block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

5. 条件渲染

1. wx:if

使用 wx:if=“{ {condition}}” 来判断是否需要渲染该代码块

<!--
  isShow: true
  条件渲染
-->
<view wx:if="{
    {isShow}}">111</view>
<view wx:if="{
    {!isShow}}">222</view>
  
<!--
  isShow: false
  条件渲染
-->
<view wx:if="{
    {isShow}}">111</view>
<view wx:if