微信小程序开发

2020-11-25 19:30:25 阅读：213 来源： 互联网

标签：index 微信程序开发 tabBar 跳转 wx pages 页面

小程序

开发小程序第一步是先申请一个小程序账号（一个邮箱只能申请一个）。
下载微信开发者工具，扫码登录。

配置

全局配置：在小程序根目录下的app.json文件对微信小程序进行全局配置，内容为一个JSON文件。

配置项：
Pages用于指定小程序由哪些页面组成，文件不需要写文件后缀
小程序中新增/减少页面，都需要对pages数组进行修改

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

Window用于设置小程序的状态栏、导航条、标题、窗口背景色等

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },

tabBar（tab栏的切换效果）可以通过tabBar配置项指定tab栏的表现，以及切换显示对应的页面

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/icons/home.png",
        "selectedIconPath": "/icons/home-o.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/icons/category.png",
        "selectedIconPath": "/icons/category-o.png"
      }
    ]
  },

更多内容见官网

路由跳转

wx.switchTap:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.reLaunch:关闭所有页面，打开到应用内的某个页面

小程序代码构成

当我们新建一个文件夹时，文件构成有：

.json 页面配置
.wxml 页面结构
.wxss 页面样式表
.js 页面逻辑

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
如不提供wx:key，会报一个warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染 wx:if

在框架中，使用** wx:if=" "** 来判断是否需要渲染该代码块

<!-- 条件渲染 -- wx：if 值为true显示内容，为false隐藏内容 -->
<view wx:if="{{true}}">我要变好看，要变好看</view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

标签：index,微信,程序开发,tabBar,跳转,wx,pages,页面
来源： https://blog.csdn.net/weixin_46064684/article/details/110140685

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序开发

小程序

配置

路由跳转

小程序代码构成

列表渲染

条件渲染 wx:if