微信小程序

Posted tscn1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序相关的知识,希望对你有一定的参考价值。

申请小程序账号

'微信公众平台’注册。然后登录点击设置找到APPID,记录一下,后面有用。

开发准备


微信小程序官网:https://mp.weixin.qq.com/cgi-bin/wx
开发模块:https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html
开发工具下载地址

开发工具界面介绍


小程序项目是用于开发时使用的,公众号网页项目是用于调试用的

小程序demo

微信小程序开发框架

wxml-html wxss-css
编译按钮就是保存

全局配置文件app.json

{
	//页面路径,可以跳转的
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //关于顶部的一些配置
  "window":{
  //下拉刷新时三个点的动画效果
    "backgroundTextStyle":"dark",
    //顶部背景颜色
    "navigationBarBackgroundColor": "#000",
    //顶部文字
    "navigationBarTitleText": "微信",
    //文字颜色
    "navigationBarTextStyle":"white",
    //是否有下拉效果
    "enablePullDownRefresh": true,
    //下拉后的背景颜色
    "backgroundColor": "#ddd"
  },
  "style": "v2",
  //微信站内搜索配置
  "sitemapLocation": "sitemap.json",
  //底部切换栏
  "tabBar": {
  //分割线的颜色
    "borderStyle": "black",
    //选择文字的颜色
    "selectedColor": "#f30",
    //配置有几个切换栏,至少要2个,最多5个
    "list": [{
    //切换的路径
      "pagePath": "pages/index/index",
      //底部显示的文字
      "text": "首页",
      //为选中的图标
      "iconPath": "/images/icon_1.png",
      //选中的图标
      "selectedIconPath": "/images/icon_11.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "/images/icon_2.png",
      "selectedIconPath": "/images/icon_22.png"
    }
    ]
  }
}

效果图

以上是关于微信小程序的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序视图层WXML_模板

7-微信小程序 模板(template)

vscode 开发微信小程序环境配置

微信小程序json数据如何处理?

微信小程序第七天WXML语法之模板用法

微信小程序第七天WXML语法之模板用法