微信小程序入门

1.编辑工具

微信开发者工具
下载地址
可以去官网注册一个小程序账号
微信公众平台
官方地址
进入小程序模块注册即可

得到开发者id即可

2.项目创建

选择js模板创建即可完成项目创建，再进行编写即可

3.各文件夹包含文件介绍

pages存放页面的地方—index首页
-----index.js首页的业务逻辑
-----index.json首页的配置
-----index.wxml首页的模板
-----index.wxss首页的样式
—logs日志页面
utils工具满代码质量
–utilsis Tole Sources
.eslintrc.js js语法检查配置文件app.js根组件业务逻辑
app.json *app的配置
app.wxss全局样式
project.config.json项目配置
sitemap.json站点地图

4.页面创建

页面创建在pages文件下先创建文件夹再新建一个page
会自动生成四个文件 .js(js功能书写) .json（小程序页面配置） .wxml（页面编辑） .wxss（样式书写）

创建页面后会自动在app.json中配置路径

想让那个页面称为默认页面剪切到最前面就行，方便页面的书写

5.文本渲染

标签
最通用的标签
1.view 区域
view标签可以理解为html里面的div
2.text文本标签
3.button 按钮
4.input 表单
可以理解为html里的span标签或者i标签

<view>Hello World</view>
<text>你好小程序</text>
<text>你好小程序</text>
<input type="text" placeholder="我是输入框" style="border: 1rpx solid paleturquoise;"/>
<button size="mini" type="primary">点击我</button>

6.条件渲染

在admin.js文件data中定义一个
score：80
然后在admin.wxml中进行条件渲染

<view wx:if="{{score>80}}">A类</view>
<view wx:elif="{{score>70}}">B类</view>
<view wx:else>C类</view>

7.列表渲染

在admin.js文件data中定义一个 list数组
list:[
“vue”,“react”,“css”
]

<view wx:for="{{list}}">{{item}}</view>

还有很多功能就不一 一展示了
自定义渲染
wx：for =“{{list}}”
wx: for-item =“myitem” {{myitem}}
var :for-index=“ind” {{ind}}
import：引用模板
include：拷贝src中非template的内容

8.事件

bindtap 触摸/点击
bindchange 值发生变化
bindconfrim 确认
bindinput 输入变化

<button bindtap="showMsg"  type="primary">点击</button>

9.表单的双向绑定

//js
  data: {
   msg:'你好啊'
  },
changeMsg(e){
  this.setData({msg:e.detail.value})
},
//wxml
<input type="text" value="{{msg}}" bindinput="changeMsg" style="border:1rpx solid plum;"/>
<view>{{msg}}</view>