微信小程序(1)--新建项目
这些天看了一下最近特别火的微信小程序,发现和vue大同小异。
新建项目
为方便初学者了解微信小程序的基本代码结构,在创建过程中,如果选择的本地文件夹是个空文件夹,开发者工具会提示,是否需要创建一个 quick start 项目。选择“是”,开发者工具会帮助我们在开发目录里生成一个简单的 demo。
项目创建成功后,我们就可以点击该项目,进入并看到完整的开发者工具界面,点击左侧导航,在“编辑”里可以查看和编辑我们的代码,在“调试”里可以测试代码并模拟小程序在微信客户端效果,在“项目”里可以发送到手机里预览实际效果。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index.js、index.wxml、index.wxss、index.json。.js
后缀的文件是脚本文件,.json
后缀的文件是配置文件,.wxss
后缀的是样式表文件,.wxml
后缀的文件是页面结构文件。
配置
我们使用app.json
文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.json:
{
"pages":[
"pages/home/home",
"pages/read/read",
"pages/publish/publish",
"pages/information/information",
"pages/me/me",
"pages/test/test"
],
"window":{
"backgroundTextStyle":"dark",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "news",
"navigationBarTextStyle":"white"
},
"tabBar": {
"selectedColor":"#349393",
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath":"assets/home.png",
"selectedIconPath":"assets/home2.png"
},
{
"pagePath": "pages/read/read",
"text": "订阅",
"iconPath":"assets/read.png",
"selectedIconPath":"assets/read2.png"
},
{
"pagePath": "pages/publish/publish",
"text": "发稿",
"iconPath":"assets/publish.png",
"selectedIconPath":"assets/publish2.png"
},
{
"pagePath": "pages/information/information",
"text": "消息",
"iconPath": "assets/information.png",
"selectedIconPath": "assets/information2.png"
},
{
"pagePath": "pages/me/me",
"text": "我",
"iconPath": "assets/me.png",
"selectedIconPath": "assets/me2.png"
}
]
}
}
路由:
注意app.json
微信小程序(1)--新建项目的更多相关文章
- 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!
微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...
- 详解微信小程序开发(项目从零开始)
一.序 微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍一下小程序开发.注意,这里只从项目代码上做解析,不涉及小程序如何申请.打包.发布的东西.(这些跟着微信官方文档的流程走就好). ...
- 微信小程序豆瓣电影项目的改造过程经验分享
在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...
- 微信小程序“信用卡还款”项目实践
小程序概述 11月3日晚,微信团队对外宣布,微信小程序开放公测.开发者可登陆微信公众平台申请,开发完成后可以提交审核,公测期间暂不能发布. 我们前一段时间也进行了小程序开发,现在来对之前的开发体验做一 ...
- 微信小程序(2)——新建页面
在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入&qu ...
- 微信小程序之给项目设置id后提示不在合法域名列别中
hotapp 有免费的https proxy ,可以免费代理请求任何http或者https服务,只要设置好合法域名为https://wxapi.hotapp.cn, 就可以请求网址如请求小程序联盟的例 ...
- 微信小程序跳转微信小程序新增配置项目 navigateToMiniProgramAppIdList
每个小程序可跳转的其他小程序数量限制为不超过 10 个 从 2.4.0 版本以及指定日期(具体待定)开始,开发者提交新版小程序代码时,如使用了跳转其他小程序功能,则需要在代码配置中声明将要跳转的小程序 ...
- 微信小程序上传项目到github
Step1:点击使用版本控制 点击开发工具右上角的版本控制按钮 Step2:点击初始化本地仓库: 等待初始化结束 Step3:在github新建仓库 Step4: 配置git用户密码或ssh: Ste ...
- 微信小程序把玩(一)Hello WeApp
原文:微信小程序把玩(一)Hello WeApp 本篇默认已经成功安装微信小程序工具 新建项目 AppID查看公众开发平台设置查看(https://mp.weixin.qq.com) 项目名称随意填写 ...
- 微信小程序转化为uni-app项目
前言: 之前自己做一个uni-app的项目的时候前端需要实现一个比较复杂的功能,但是由于自己前端抠脚的原因没有写出来,然后自己在网上搜索的时候发现了有个微信小程序里面的页面及其的符合我的需求.那么问题 ...
随机推荐
- yield与gen.coroutine
def d(): for i in range(2): yield i def b(): yield d() print("b") yield "bb" def ...
- Django登录(含随机生成图片验证码)注册实例
登录,生成随机图片验证码 一.登录 - 随机生成图片验证码 1.随机生成验证码 Python随机生成图片验证码,需要使用PIL模块,安装方式如下: pip3 install pillow 1)创建图片 ...
- DataFrame.loc的区间
df.loc[dates[0:1],'E']和df.loc[dates[0]:dates[1],'E']不同. 前者不包含dates[1],后者是包含dates[1]的. 根据Python3中实际代码 ...
- [洛谷P3486]POI2009 KON-Ticket Inspector
问题描述 Byteasar works as a ticket inspector in a Byteotian National Railways (BNR) express train that ...
- tensorflow图像处理函数(1)
1.tensorflow中对jpeg格式图像的编码/解码函数: import matplotlib.pyplot as plt import tensorflow as tf image_raw_da ...
- mybatisplus中使用SqlRunner出错
错误描述: SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@739488d7] was not registered ...
- C# 调用delphi编写的dll
技术实现 如何逐步实现动态库的加载,类型的匹配,动态链接库函数导出的定义,参考下面宏定义即可: #define LIBEXPORT_API extern "C" __declspe ...
- crazyflie四轴飞行器
源地址:http://www.bitcraze.se/2013/02/pre-order-has-started/ Crazyflie是一个开源的纳米四旋翼 来几张靓照 开发平台是开源的,所以原理图和 ...
- Vagrant 手册之 Vagrantfile - 配置版本
原文地址 配置版本是 Vagrant 1.1+(引入了大量新功能和配置选项) 能够与 Vagrant 1.0.x Vagrantfiles 保持向后兼容的机制. 现在运行 vagrant init 时 ...
- Jenkins持续集成_02_添加python项目&设置定时任务
前言 自动化测试脚本编写后,最终目的都是持续集.持续集成可以实现一天多次部署运行自动化脚本,对功能进行不断监控测试.由于小编使用python编写的自动化脚本,这里仅讲解下如何在Jenkins中添加py ...