微 信小程序开发| “朝闻道”知识分享大赛

[Thomas Wade]

这是我参加朝闻道知识分享大赛的103 篇文章

2.导入代码包cont.

在小程序管理页面单击右上角“导入”按钮选择已经重命名后的模板代码包，或者直接点加号图标出现新建项目页面然后从项目路径来选模板代码包，效果都相同。 项目名称请开发者手动更改，该名称可自定义，一般建议和代码包的新名称保持一致； AppID也会自动读取到模板代码中原始开发者的信息，如果是他人项目请替换为自己的AppID，否则无法继续创建项目； 后端服务这里如果是测试号或未开通云开发的账号则不会显示，如果是已开通腾讯云的账号则会显示“微信云开发”字样，不会影响模板本身的内容无需理会。 最后点击右下角的“确定”按钮即可完成项目导入工作。

我的第一个小程序

       新建项目时默认生成的模板代码虽然结构完整，但是代码内容相对复杂不太适合初学者入门学习，因此这里我们不妨一起来制作自己手写的第一个小程序。       以2.1.5节制作好的小程序空白模板包templateDemo为例，复制一份并重命名为chapter02导入到开发工具中就可以继续在该项目中进行改造了。

1.导航栏设计

顶部导航栏的设计需要在app.json文件中进行配置，找到其中的window属性，相关代码修改如下：

 ↓

 导航栏设计cont. 属性解释如下： "backgroundTextStyle":下拉页面后出现的背景文字样式，当前不需要可以删除； "navigationBarBackgroundColor": 顶部导航栏的背景颜色，只支持十六进制颜色表示法，例如#ff0000或简写#f00为红色，#00ff00或简写#0f0为绿色，更多颜色可以查看本书附录C小程序预定颜色； "navigationBarTitleText": 导航栏上的文字内容，可以支持中文； "navigationBarTextStyle":导航栏上的文字颜色，目前只支持取值为black（黑色）或white(白色)，由于white就是默认值也可以直接删除这个属性来实现白色效果。

表示导航栏背景色为紫色、文字内容为“我的第一个小程序”且文字为白色。 此时顶部导航栏就已经配置好了，开发者也可以自定义显示的颜色和文字内容。 实际上window属性还有其它参数可以配置，后续学习可见本章2.2.2 主体文件中关于app.json的介绍。

 

 2. 视图设计

接下来我们找到index.wxml文件，在这里面可以放入图片、文字、按钮等基础内容，具体代码如下：

 其中第1、2、5、8行代码是wxml页面特有的注释效果，以<!--开头且以-->结尾。这段内容用于给开发者记录开发的内容，不会显示到小程序页面上。注释的快捷键为Ctrl+/，用于将指定行添加或去掉注释效果。

 

2. 视图设计cont. 上述代码用到了以下3个小程序组件： <image>组件：用于显示图片，需要配套src属性来指定图片来源（因本次开发需要用到图片，找一张矩形图片logo.png用于制作头像，将其放到根目录下的images文件夹中）； <text>组件：用于显示文本，可以直接将文本放在组件的首尾标签之间； <button>组件：用于显示按钮，可以直接将按钮上的文字放在组件的首尾标签之间。