小程序开发的基本步骤

总结

• 小程序开发文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/
• 百度搜索微信公众平台 可以在里面注册小程序账号
• 小程序需要实名认证 先要填写基本信息
• 小程序的appId 位置
• https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=2029468552 点击开发 -> 开发设置 可以查看自己的appId
• 微信调试工具 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

基础组件

• 在开发文档中点击 组件 可以查看小程序的组件 也就是一些微信官方封装好了的标签
• view 相当于我们html的div
• text 相当于 html的span
• navigator 相当于 我们的a标签 但是连接不是用href 而是 url属性
• block 标签相当于vue的template 标签本身不会渲染在页面上 但是里面的内容会渲染
• image 标签相当于html的img标签
• 在小程序组件中的标签均可以直接使用

css

• 在小程序中可以使用css的样式，但是 ‘*’ 不能使用

js

• 数据存放 跟vue一样也是存放在data中的
• 小程序中渲染一个data中的数据的值 要使用{{想要渲染的变量}}
• 小程序的判断语法 判断一个标签是否渲染 wx:if="{{变量}}" wx:elif="{{变量}}" wx:else
• wx:if的写法如果值为false 那么 dom不会渲染 如果是true dom会重新渲染
• 小程序中利用css控制dom显示隐藏的方法 hidden 属性 写在标签的开始便签的关键字后面
• 如果hidden的值是true 则相当于给当前标签设置了 display: none
• 如果hidden的值是false 相当于给当前标签删除display：none

app.json

• 里面的pages 属性 是一个数组 数组项是我们的页面地址
• 数组项的第一个地址为程序的默认页面
• window 的值是一个对象 包含了头部title部分的样式及文案的设置
• 在window中的backgroundTextStyle的值只有两个 分别为 ‘dark’ 和 ‘light’
• navigationBarTextStyle title的字体颜色也只有两个值 分别为 ‘black’ 和 ‘white’