【系分】微信小程序开发入门(一)

开发准备

微信小程序官方教程

下载开发工具


 正式开发

1.   添加项目,输入AppID,选择项目目录创建新文件夹,若文件夹为空,系统就会自动创建整个项目架构

【注意:记得勾选quickstart项目】

 

2.   自动创建的项目有以下架构目录:菜单栏,页面效果显示,代码架构目录,代码栏

着重讲解代码架构目录:app.jsapp.jsonapp.wxss

 

app.js是小程序的脚本代码。

我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。

 

JavaScript的代码。较重要的是App里面包含的两个常用方法onLaunch小程序启动的时候执行的方法)、getUserInfo自定义的方法用于获取用户信息 

【详情查阅微信API文档微信API文档:https://developers.weixin.qq.com/miniprogram/dev/api/

 

app.json是对整个小程序的全局配置。

我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

【注意:该文件不可添加任何注释】

 

它主要包含以下几个配置: 
·pages:页面路径的数组,表示小程序要加载的所有页面,其中数组第一项代表小程序的初始页面。 
·window:微信原生功能,定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。 
·tabBar:微信原生功能,定制化不强。适用于常规的Tab应用,Tab栏可置于顶部或底部;tabBar是一个数组,仅支持2-5个tab。 
·networkTimeout:配置小程序网络请求的超时时间。 
·debug:调试模式开关,开发模式下建议开启,正式发布别忘了关闭。

 

样例1设置导航栏的标题为商城,字体为白色,背景为黑色

"window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#000",

    "navigationBarTitleText": "商城",

    "navigationBarTextStyle":"white"

  }

app.json下把上面的代码替换如window

 

样例2:增加一个界面

"pages":[

    "pages/index/index",

    "pages/logs/logs",

    "pages/addPage/addPage"

  ]

app.json里的pages属性加入你要的路径(如pages/addPage/addPage),路径写好后系统会自动建好文件

 

app.wxss是整个小程序的公共样式表。

我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。

wxss样式总结如下:

 display属性 
- none:此元素不会被显示 
- block:两个元素自动换行 
- inline:两个元素靠在一起 
- inherit:继承父类 
- flex:多栏多列 
2. flex-direction: 
- column 垂直分布 
- row 水平分布 
3. flex-wrap 
- nowrap item溢出不换行 
- wrap 超出的item跳到下一行 
4. justify-content属性 
- flex-start:左对齐 
- flex-end:右对齐 
- center:居中 
- space-between item中间留出等间距 
- space-around:环绕item流程等间距 
5. align-items item 边界线对齐方式 
- flex-start | flex-end | center | baseline |stretch 
6. border-bottom 边界线 
- 举个栗子 1px solid #ccc; 
7. align-items item 边界线对齐方式 
- flex-start | flex-end | center | baseline |stretch 
8. overflow-x 内容超过边框处理方式 
- visible 显示超出的内容 
- hidden 隐藏超出的内容 

- auto 自动加入滚动条

参考文档:

https://blog.csdn.net/u012927188/article/details/72629342


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页