小程序入门心得（不谈api）

Posted 2020-10-18 Ziggs

小程序入门

一、准备

首先先去微信公众平台注册一个小程序账号，去拿到一个AppID（没AppID也可以开发，只是有些功能会受限），注册成功后到开发设置获取自己的AppID，即使有AppID有些功能还是不开放的，例如微信支付，小程序发布。这些功能需要通过认证之后才可（认证要交300块）。开发之前还需要下载个微信web开发者工具。

 

 

微信公众平台网址：

https://mp.weixin.qq.com/

微信web开发者工具下载：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

微信小程序文档：

https://mp.weixin.qq.com/debug/wxadoc/dev/

 

 

 

二、目录结构及配置文件

这里只简单的概述一下各文件的作用，详细请看文档

 

app.json全局配置文件，每个新增的页面需要在该文件里面注册

app.js全局逻辑层，其指定小程序的生命周期函数，用户信息的获取等

app.wxss全局样式

 

关于内层页面：*.js（页面逻辑），*.json（页面配置），*.wxml（页面结构），*.wxss（页面样式），其中*.js和*.wxml是必须有的

 

 

 

三、代码写法

页面层（*.wxml）和angular的写法差不多，只是api不相同。

 

 

逻辑层（*.js），需要一个page()函数来注册页面，接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

 

 

 

配置层（*.json）就简单一个对象文件，可不做配置；

样式（*.wxss）和css文件一样，只有有个别样式不通用；

 

 

  

四、ui组件

小程序提供了一些比较常用的组件，例如日期，图标，轮播图，地图，进度条等。列举一下移动端比较常用到的组件，具体配置请看组件文档

https://mp.weixin.qq.com/debug/wxadoc/dev/component/

view:经常会用到的容器，相当于div

swiper:滑块视图容器，图片，内容轮播展示常用到

icon:小程序提供的图标，有以下几种

 

picker:滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器

slider:滑动选择器

switch:开关选择器

map:地图组件

Camera:相机组件

Progress:进度条组件

 

 

 

五、关于微信web开发者工具

调试

调试模式的console、sourse、network、storage、wxml这些功能其实与谷歌浏览器的调试模式的功能无异。下面稍微介绍一下谷歌没有的AppData的数据调试功能，展示并绑定页面的数据，修改AppData的数据页面会相应变化

 

 

 

快捷键

官方快捷键：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/shortcut.html

 

补充：
　　Ctrl+[， Ctrl+]：代码行缩进
　　Ctrl+Shift+[， Ctrl+Shift+]：折叠打开代码块
　　Ctrl+Shift+Enter：在当前行上方插入一行

Ctrl+End：移动到文件结尾

Ctrl+Home：移动到文件开头
　　Ctrl+i：选中当前行
　　Shift+End：选择从光标到行尾
　　Shift+Home：选择从行首到光标处
　　Ctrl+Shift+L：选中所有匹配
　　Ctrl+D：选中匹配
　　Ctrl+U：光标回退

 

六、服务器配置

 

 

 

 

 

服务器配置不支持IP地址及端口号，需要请求本地服务器需要自行配置代理服务器

 

 

 

 

 

 

 

 

 

七、关于小程序的发布

 

 

 

 

 

没有进行微信认证只能发布体验版本

 

 

 

体验版本需要让人访问需要添加项目成员