制作微信小程序入门

最新推荐文章于 2024-11-05 10:56:15 发布

日青山雨xxq

最新推荐文章于 2024-11-05 10:56:15 发布

阅读量90

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/anniaxie/article/details/134582209

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景

如果想做一个自己专属的微信小程序，但又不知道如何入手，可以看看这篇文章。

前期准备

步骤如下：

下载并安装微信开发者工具。
自定义安装路径，建议不要安在c盘。
申请一个微信小程序账号。
ps：如果已有公众号账号可以直接开通小程序和开发者权限。
创建一个小程序，导入已有的WeUI模板。
WeUI官网可查看样式库。
1. 打开github，下载.zip到本地并解压。
2. 打开微信小程序导入WeUI。
  新建小程序，输入信息后，点击确定。

PS：APPID 在第2步查看。开发者权限申请后界面

示例

文件简单讲解

在这里插入图片描述
主要文件说明：

index.js：编写页面主要逻辑，如下拉刷新等。
index.wxml：编写页面排版，如页面里的文字内容等，可用vue。
app.js：编写主题等配置信息，如页面导航等，每次打开小程序，会先访问。
app.json：编写主题等配置信息，如页面颜色等，每次打开小程序，会先访问。

目标：开发一款”美丽图册“

最终效果

编写代码

修改主界面

1.修改页眉，点击保存,自动刷新预览。

// 在app.json中ctrl+F 搜索navigationBarTitleText
 "window": {
   "navigationBarTextStyle": "black",
   "navigationBarTitleText": "在水一方", //这个值
   "navigationBarBackgroundColor": "#EDEDED",
   "backgroundColor": "#EDEDED"
 },

修改标题。

<!-- 在Example/index.wxml 找到 class="page__hd" 位置修改内容 -->
   <view class="page__hd">
       <view aria-role="heading" aria-level="1" class="page__title">罗敷集</view>
       <view class="page__desc">
       关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。
       </view>
   </view>

添加美女
a. 修改组件显示

// 1. 在Example/index.js中，修改list 中的元素内容。如下：
      {
        id: 'form',
        name: '佟丽娅',
        open: false,
        pages: [
          {name: "简介", url: "intro-tong"},
          {name: "图片", url: "img-tong"},
          {name: "作品", url: "works-tong"},
          {name: "秘闻", url: "secrets-tong"},
        ],
      },

b. 解决中文名的文件无法被打开的问题

<!-- 在Example/index.wxml 中替换class="weui-cells {{item.open ? 'weui-cells_show' : ''}}"内容 如下：-->
<view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
   <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*this">
       <navigator url="{{page.url}}/{{page.url}}" class="weui-cell weui-cell_access">  
           <view class="weui-cell__bd">{{page.name}}</view>
           <view class="weui-cell__ft weui-cell__ft_in-access"></view>
       </navigator>
   </block>
</view>

填充下拉页面内容

在Examples中拷贝一个文件夹，例如：top-tips
将top-tips目录及其文件名都改为intro-tong
打开intro-tong.wxml文件，删除所有代码，拷贝如下代码：

<page-meta root-font-size="system"/>
<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
	<view class="page__hd">
		<view class="page__title">简介</view>
    <text>\n</text>  
    <view class="page__desc">
    佟丽娅，1983年8月8日出生于新疆伊犁察布查尔，中国内地影视女演员、舞者。
    2006年，佟丽娅因出演情感剧《新不了情》而踏入演艺圈。2008年，她因在古装剧《母仪天下》中饰演赵飞燕而崭露头角。
    2011年开始，佟丽娅凭借穿越剧《宫锁心玉》、爱情剧《北京爱情故事》获得更多关注。
    </view>
	</view>
  <view class="page__bd">   
    <view class="weui-article">
      <view class="weui-article__section">                
          <view class="weui-article__section">                    
              <view class="weui-article__p">                        
                <image class="weui-article__img" show-menu-by-longpress="true" src="https://i.loli.net/2020/05/18/BJPbAiHzECNMStu.jpg" mode="aspectFit" style="height: 180px" />                    
              </view>                
          </view>            
      </view>        
    </view>
  </view>
</view>