微信小程序开发

  微信小程序开发

       指南

              https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

             创建一个账号,下载开发者工具

---

这个就是我们下载的微信开发者磨板

左边是我们的手机型号,可以自己选择,这个时候我们看中间的部分是项目的结构

pages

   我们在这个里面创建一个文件夹,例如   (home) 文件夹,然后我们在项目目录中找到(app.json) 这个文件夹,是用来配置路由

例如图片上的红箭头一样配置路由

路由默认选择最上面的一个显示

 

项目目录

项目目录
 

我们就拿我创建好的文件夹来说把(home)

当我们创建好了一个文件夹,他里面会自动带4个文件

home.js  是写逻辑代码的

home.json   是页面配置的文件

home.wxml  是相当于  html 框架用来写页面的

home.wxss  是相当于css样式的,用来写样式的

微信小程序开发者

 text 标签代表html里面的span

view  标签代表html里面的div标签

block 用这个标签包裹其他标签,不会显示block这个标签的

                                             注意

                                                           当我们每次写完一块代码的时候,都需要手动保存  ctrl + s  手动保存一下,这样不容易造成报错 也会及时的刷新

---

小程序的属性介绍

       循环  wx:for='{{**}}'  wx:key='index'   wx:for-item='value'  wx:for-index ='key'

<block wx:for="{{arr}}" wx:for-item='value' wx:for-index='key' wx:key='index'>

  <view>

    <text>索引{{key+1}}</text>

   <text>{{value}}</text>

  </view>

</block>

 

判断  wx:if='{{false}}'   wx:elif='{{true}}'  wx:else   当有3个值判断时候

<view wx:if="{{false}}">注册</view>

<view wx:elif='{{true}}'>登陆</view>

<view wx:else>最后</view>

 

三元运算符

<view>{{'2'==2?"对":"错"}}</view>

 

input框的双向绑定    bindinput="" 

<input type="text" bindinput="" class="txt"/>

 

button 的双向绑定  bindtap=''

<button bindtap="">按钮</button>